/* Public apex site (OSP-6). Organic tokens only; fonts are self-hosted (SIL OFL 1.1). */
@font-face { font-family: "Caprasimo"; font-weight: 400; font-display: swap;
  src: url("fonts/caprasimo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Caprasimo"; font-weight: 400; font-display: swap;
  src: url("fonts/caprasimo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-display: swap;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF; }

:root { --color-accent: var(--color-accent-700); }

html, body { margin: 0; background: var(--color-bg); color: var(--color-text); }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
.site-shell { max-width: 1040px; margin: 0 auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); min-height: 100vh; box-sizing: border-box; overflow-wrap: anywhere; overflow-x: clip; }
.site-shell a { color: var(--color-accent-700); }
.site-shell a:hover { color: var(--color-accent-800); }
.site-shell a.btn-primary { color: var(--color-bg); text-decoration: none; }
.site-shell a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.site-brand { font-family: var(--font-heading); font-size: 22px; text-decoration: none; color: var(--color-text) !important; }
.site-nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); font-weight: 600; }
.site-nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

.site-banner { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-accent-100); color: var(--color-accent-800); }
.site-banner-preview { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.site-gap { padding: 0 var(--space-1); border-radius: 6px; background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 600; }

.site-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-8); }
.site-hero { position: relative; isolation: isolate; max-width: 640px; padding: var(--space-8) 0 var(--space-4); }
.site-hero::after { content: ""; position: absolute; z-index: -1; top: var(--space-4); right: -40%; width: 340px; height: 340px; border-radius: 50%; background: var(--color-accent-2-100); }
.site-hero h1 { font-family: var(--font-heading); font-size: clamp(34px, 6vw, 52px); }
.site-lede { font-size: 19px; max-width: 34em; }
.site-cards { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-cards .card { flex: 1 1 260px; }
.site-note { max-width: 640px; }
.site-note h2, .site-legal h2 { font-family: var(--font-heading); font-size: 22px; }

.site-legal { max-width: 70ch; }
.site-legal h1 { font-family: var(--font-heading); font-size: clamp(30px, 5vw, 40px); }
.site-meta { font-size: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.site-toc { margin: var(--space-4) 0 var(--space-6); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); }
.site-toc ol { margin: 0; padding-left: 1.4em; }
.site-legal section { scroll-margin-top: var(--space-4); margin-bottom: var(--space-6); }
.site-prose { white-space: pre-line; }
.site-legal code { font-size: 14px; }

.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); font-size: 14px; }
@media (max-width: 560px) { .site-hero::after { display: none; } .site-shell { padding: var(--space-4) 16px; } }

.site-skip { position: absolute; transform: translateY(-200%); padding: var(--space-3); background: var(--color-surface); color: var(--color-text); }
.site-skip:focus { position: relative; display: inline-block; transform: none; outline: 2px solid var(--color-accent); }

.site-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }

@media (prefers-color-scheme: dark) {
  :root {
  --color-bg: #171c22;
  --color-surface: #29323c;
  --color-text: #f5f7fa;
  --color-text-muted: #c0c8d2;
  --color-on-accent: #211b16;
  --color-on-danger: #251919;
  --color-warning: #ffcf70;
  --color-warning-bg: #493919;
  --color-divider: #7b8999;
  --color-accent: #f6a06b;
  --color-accent-600: #ffb98a;
  --color-accent-700: #ffc6a5;
  --color-accent-800: #ffe1d0;
  --color-accent-100: #4a2a14;
  --color-accent-2-100: #3d472b;
  --color-accent-2-800: #e1eecc;
  --color-neutral-100: #474238;
  --color-neutral-300: #201e1d;
  --color-neutral-800: #eee7db;
  --shadow-md: 0 3px 10px rgba(0, 0, 0, .4);
  --color-danger: #ffab9f;      /* AA on bg and surface (dark) */
  --color-danger-bg: color-mix(in srgb, #ffab9f 12%, var(--color-surface));
  --color-info: #a9d2f5;        /* AA on its tint (dark) */
  --color-info-bg: color-mix(in srgb, #a9d2f5 12%, var(--color-surface));
  --color-success: #a6dca0;     /* AA on its tint (dark) */
  --color-success-bg: color-mix(in srgb, #a6dca0 12%, var(--color-surface));
  --color-bg: var(--color-neutral-900);
  --color-surface: var(--color-neutral-100);
  --color-text: var(--color-neutral-800);
  }
}