/* Foundation-owned live homepage profile, owner correction 2026-09-23.
   Exact sRGB reference values preserve the observed Vercel design; see
   live-homepage-reference.json and DESIGN_DIRECTION.md. No per-page palettes. */
@font-face {
  font-family: Jost;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/jost-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: Figtree;
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

@layer tokens {
  :root {
    color-scheme: dark;

    /* Observed live values. Stable across surface, scheme and display gamut. */
    --ink-0: #020817;
    --ink-1: #04102a;
    --ink-2: #071a3d;
    --text: #f3f6fb;
    --text-2: #c3cee0;
    --text-3: #8e9cb5;
    --gold-hi: #f9e6b8;
    --gold: #e6bf76;
    --gold-lo: #b98a3e;
    --edge: rgb(160 205 255 / 0.42);
    --edge-soft: rgb(160 205 255 / 0.16);
    --gold-gradient: linear-gradient(180deg, #fcecc4 0%, #f0cf8c 42%, #dcad5f 78%, #c99546 100%);
    --nav-gradient: linear-gradient(rgb(30 62 120 / 0.5), rgb(6 20 50 / 0.6));
    --card-gradient: linear-gradient(rgb(12 34 78 / 0.92), rgb(5 17 42 / 0.96));
    --footer-gradient: radial-gradient(120% 70% at 50% 0%, rgb(28 70 150 / 0.24), transparent 62%), linear-gradient(#040d25, var(--ink-0) 70%);
    --footer-edge-gradient: linear-gradient(90deg, rgb(110 170 255 / 0.3) 0%, rgb(150 200 255 / 0.75) 14%, rgb(205 230 255 / 1) 32%, rgb(130 185 255 / 0.7) 50%, rgb(205 230 255 / 1) 68%, rgb(150 200 255 / 0.75) 86%, rgb(110 170 255 / 0.3) 100%);
    --footer-edge-shadow: 0 0 10px rgb(110 175 255 / 0.7), 0 0 26px rgb(70 140 255 / 0.4);
    --footer-edge-glow: radial-gradient(60% 100% at 50% 0%, rgb(80 150 255 / 0.16), transparent 75%);
    --footer-pad-block-end: calc(var(--space-10) + env(safe-area-inset-bottom, 0px));
    --footer-col-pad-inline: clamp(20px, 2.6vw, 36px);
    --footer-social-gap: clamp(16px, 2vw, 26px);
    --rule-shadow: 0 0 10px rgb(230 191 118 / 0.5);

    /* Icon buttons and the dialog/drawer they open (assets/web/home/index.html
       .icon-btn/.menu-btn/dialog/.panel/.drawer*), ported for the working
       mobile menu the homepage has and the shared shell previously lacked. */
    --icon-btn-gradient: linear-gradient(180deg, rgb(36 74 140 / 0.42), rgb(6 20 52 / 0.62));
    --icon-btn-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), 0 0 16px rgb(60 130 255 / 0.28);
    --icon-btn-hover-border: rgb(200 228 255 / 0.85);
    --icon-btn-hover-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 0 26px rgb(80 160 255 / 0.5);
    --backdrop-color: rgb(1 6 18 / 0.74);

    /* Wordmark (assets/web/home/index.html .brand/.brand-name/.brand-tag):
       corrected 2026-09-24 after an owner-supplied reference image caught the
       tagline's flanking gold lines and both text tracking values missing. */
    --brand-name-size: 12.5px;
    --brand-name-track: 0.15em;
    --brand-tag-track: 0.26em;
    --brand-tag-size: 7.5px;

    /* assets/web/home/index.html @media(max-width:640px) shrinks these same
       four properties (plus .icon-btn/.menu-btn below) so the wordmark and
       icon buttons keep fitting one row; ported at the same breakpoint. */
    --brand-name-size-narrow: 10.5px;
    --brand-name-track-narrow: 0.12em;
    --brand-tag-size-narrow: 6.5px;
    --brand-tag-line-gradient: linear-gradient(90deg, rgb(230 191 118 / 0.1), var(--gold));
    --panel-gradient: linear-gradient(170deg, rgb(26 56 112 / 0.94), rgb(5 16 40 / 0.98) 60%);
    --panel-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 30px 80px rgb(0 0 0 / 0.6), 0 0 44px rgb(60 140 255 / 0.2);
    --drawer-pad-block: calc(var(--space-4) + env(safe-area-inset-top, 0px)) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    --nav-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 0 24px rgb(60 130 255 / 0.24), 0 10px 28px rgb(0 0 0 / 0.35);
    --card-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 18px 42px rgb(0 0 0 / 0.5), 0 0 22px rgb(60 140 255 / 0.18);
    --gold-shadow: inset 0 1px 0 rgb(255 255 255 / 0.75), inset 0 0 0 1px rgb(255 236 190 / 0.55), 0 10px 26px rgb(0 0 0 / 0.38), 0 0 28px rgb(230 191 118 / 0.42);
    --glass-blur: 14px;
    --seed-brand: var(--gold);
    --seed-neutral-hue: 258;

    /* ── Neutral ladder ──────────────────────────────────── */
    --n-0: oklch(0.995 0.004 var(--seed-neutral-hue));
    --n-50: oklch(0.975 0.005 var(--seed-neutral-hue));
    --n-100: oklch(0.945 0.010 var(--seed-neutral-hue));
    --n-200: oklch(0.900 0.014 var(--seed-neutral-hue));
    --n-300: oklch(0.840 0.018 var(--seed-neutral-hue));
    --n-400: oklch(0.720 0.022 var(--seed-neutral-hue));
    --n-500: oklch(0.600 0.026 var(--seed-neutral-hue));
    --n-600: oklch(0.500 0.030 var(--seed-neutral-hue));
    --n-700: oklch(0.400 0.034 var(--seed-neutral-hue));
    --n-800: oklch(0.300 0.037 var(--seed-neutral-hue));
    --n-900: oklch(0.250 0.039 var(--seed-neutral-hue));
    --n-950: oklch(0.220 0.040 var(--seed-neutral-hue));
    --n-1000: oklch(0.200 0.040 var(--seed-neutral-hue));

    /* ── Status ──────────────────────────────────────────── */
    --status-success: light-dark(oklch(0.51 0.12 157), oklch(0.74 0.12 157));
    --status-warning: light-dark(oklch(0.54 0.12 63), oklch(0.82 0.13 63));
    --status-danger: light-dark(oklch(0.50 0.18 30), oklch(0.72 0.16 30));
    --status-info: light-dark(oklch(0.52 0.09 223), oklch(0.76 0.09 223));

    /* ── Semantic surfaces ───────────────────────────────── */
    --surface-canvas: var(--ink-0);
    --surface-raised: var(--ink-1);
    --surface-sunken: light-dark(var(--n-100), oklch(0.165 0.038 var(--seed-neutral-hue)));
    --surface-overlay: light-dark(var(--n-0), var(--n-900));
    --surface-inset: light-dark(var(--n-100), oklch(0.190 0.039 var(--seed-neutral-hue)));

    --text-primary: var(--text);
    --text-secondary: var(--text-2);
    --text-tertiary: var(--text-3);
    --text-inverse: light-dark(var(--n-0), var(--n-1000));
    --text-brand: var(--gold-hi);

    --border-subtle: light-dark(oklch(0.20 0.04 258 / 0.12), oklch(0.98 0.01 258 / 0.14));
    --border-default: light-dark(oklch(0.20 0.04 258 / 0.16), oklch(0.98 0.01 258 / 0.18));
    --border-strong: light-dark(oklch(0.20 0.04 258 / 0.22), oklch(0.98 0.01 258 / 0.26));
    --edge-highlight: light-dark(oklch(0.98 0.01 258 / 0.70), oklch(0.98 0.01 258 / 0.08));

    --focus-ring: var(--gold-hi);

    /* ── Light model ─────────────────────────────────────── */
    --shadow-ink: oklch(0.18 0.04 var(--seed-neutral-hue));
    --elev-0: none;
    --elev-1:
      0 1px 1px -0.5px oklch(from var(--shadow-ink) l c h / 0.08),
      0 2px 4px -1px oklch(from var(--shadow-ink) l c h / 0.06),
      0 4px 12px -3px oklch(from var(--shadow-ink) l c h / 0.05);
    --elev-2:
      0 1px 1px -0.5px oklch(from var(--shadow-ink) l c h / 0.10),
      0 4px 8px -2px oklch(from var(--shadow-ink) l c h / 0.08),
      0 12px 24px -6px oklch(from var(--shadow-ink) l c h / 0.07);
    --elev-3:
      0 1px 1px -0.5px oklch(from var(--shadow-ink) l c h / 0.12),
      0 8px 16px -4px oklch(from var(--shadow-ink) l c h / 0.10),
      0 24px 48px -12px oklch(from var(--shadow-ink) l c h / 0.10);
    --elev-4:
      0 2px 4px -1px oklch(from var(--shadow-ink) l c h / 0.14),
      0 16px 32px -8px oklch(from var(--shadow-ink) l c h / 0.12),
      0 48px 96px -24px oklch(from var(--shadow-ink) l c h / 0.16);
    --scrim: oklch(from var(--shadow-ink) l c h / 0.45);

    /* ── Space ───────────────────────────────────────────── */
    --space-px: 1px;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ── Geometry ────────────────────────────────────────── */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 11px;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.75rem;
    --radius-3xl: 2.25rem;
    --radius-full: 999px;
    --hairline: 1px;

    /* ── Type ────────────────────────────────────────────── */
    --font-ui: "Figtree", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-display: "Jost", "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --text-2xs: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;
    --text-5xl: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);
    --text-6xl: clamp(3.5rem, 1.8rem + 6.4vw, 7rem);

    --track-2xs: 0.02em;
    --track-xs: 0.015em;
    --track-sm: 0.01em;
    --track-base: 0;
    --track-md: 0;
    --track-lg: -0.005em;
    --track-xl: -0.011em;
    --track-2xl: -0.018em;
    --track-3xl: -0.022em;
    --track-4xl: -0.026em;
    --track-5xl: -0.032em;
    --track-6xl: -0.036em;
    --track-caps: 0.05em;

    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.45;
    --leading-relaxed: 1.6;
    --leading-loose: 1.75;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ── Motion ──────────────────────────────────────────── */
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring-snap: linear(
      0, 0.0195, 0.0764 4.2%, 0.1683, 0.2917 10.1%, 0.4361, 0.5872 17%,
      0.7143, 0.8227 23.4%, 0.9018, 0.9548 29.7%, 0.9852 34%, 1 40%, 1 100%);
    --ease-spring-soft: linear(
      0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
      0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%,
      1.017 63.9%, 1.001 100%);
    --dur-instant: 70ms;
    --dur-fast: 130ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;
    --dur-deliberate: 480ms;

    /* ── Layout ──────────────────────────────────────────── */
    --measure-prose: 68ch;
    --width-form: 32rem;
    --width-content: 1320px;
    --width-app: 96rem;
    --width-wide: 120rem;
    --width-home: 82.5rem;
    --gutter: clamp(16px, 2.4vw, 28px);
    --icon-tile: 2.25rem;
    --icon-metric: 2rem;
    --icon-orb: 3.6875rem;
    --symbol-w: 5.5rem;
    --symbol-h: 3.0625rem;
    --globe-w: 10.625rem;
    --globe-h: 11.25rem;
    --hero-art-h: 20.0625rem;
    --nav-height: 84px;
    --control-height: 44px;
    --hero-min-height: 100svh;
    --mark-size: 3rem;
    --lockup-max: 16rem;
    --card-min: 18rem;
    --link-min: 14rem;
    --sidebar-min: 16rem;
    --sidebar-max: 22rem;
    --hero-copy-max: 36rem;
    --hero-visual-min: 14rem;
    --dt-width: 10rem;
    --select-lift: 2px;
    --focus-offset: 2px;
    --ring-width: 2px;

    /* ── Z ───────────────────────────────────────────────── */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-dropdown: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;

    /* Live blue glass, with solid navy fallback for all readable surfaces. */
    --glass-field: var(--ink-0);
    --glass-slab: var(--ink-1);
    --glass-lift: var(--ink-2);
    --glass-edge: var(--edge);
    --glass-shine: oklch(from var(--n-0) l c h / 0.16);
    --glass-copy: var(--text);
    --glass-muted: var(--text-2);
    --glass-identity: var(--ink-1);
    --glass-gold: var(--gold);
    --glass-ice: oklch(0.86 0.08 230);

    --btn-bg: var(--seed-brand);
    --btn-bg-hover: oklch(from var(--seed-brand) calc(l + 0.04) c h);
    --btn-bg-press: oklch(from var(--seed-brand) calc(l - 0.03) calc(c + 0.01) h);
    --btn-fg: #21180a;
    --elev-select:
      inset var(--space-1) 0 0 0 var(--seed-brand),
      0 1px 1px -0.5px oklch(from var(--shadow-ink) l c h / 0.12),
      0 8px 16px -4px oklch(from var(--shadow-ink) l c h / 0.10),
      0 24px 48px -12px oklch(from var(--shadow-ink) l c h / 0.10);

    /* ── CTR-FND-001 aliases (pages bind --ess-*) ────────── */
    --ess-ink: var(--ink-0);
    --ess-ink-muted: var(--text-3);
    --ess-surface: var(--text);
    --ess-surface-elevated: var(--text);
    --ess-panel: var(--ink-1);
    --ess-line: var(--edge);
    --ess-accent: var(--seed-brand);
    --ess-accent-strong: var(--gold-lo);
    --ess-accent-soft: var(--gold-hi);
    --ess-success: var(--status-success);
    --ess-warning: var(--status-warning);
    --ess-danger: var(--status-danger);
    --ess-focus: var(--focus-ring);
    --ess-overlay: var(--scrim);
    --ess-font-display: var(--font-display);
    --ess-font-display-weight: var(--weight-semibold);
    --ess-font-display-tracking: var(--track-caps);
    --ess-font-ui: var(--font-ui);
    --ess-font-ui-weight: var(--weight-regular);
    --ess-font-mono: var(--font-mono);
    --ess-type-brand: var(--text-5xl);
    --ess-type-h1: var(--text-2xl);
    --ess-type-h2: var(--text-xl);
    --ess-type-h3: var(--text-lg);
    --ess-type-body: var(--text-md);
    --ess-type-small: var(--text-sm);
    --ess-type-line-body: var(--leading-relaxed);
    --ess-space-unit: var(--space-1);
    --ess-page-x: var(--gutter);
    --ess-page-y: var(--space-8);
    --ess-section: var(--space-24);
    --ess-space-stack: var(--space-4);
    --ess-space-cluster: var(--space-3);
    --ess-radius-none: 0;
    --ess-radius-control: var(--radius-xs);
    --ess-radius-panel: var(--radius-lg);
    --ess-radius-glass: var(--radius-lg);
    --ess-radius-glass-lg: var(--radius-xl);
    --ess-motion-enter: var(--dur-slow);
    --ess-motion-exit: var(--dur-base);
    --ess-motion-ease: var(--ease-out);
    --ess-max-content: var(--width-content);
    --ess-nav-height: var(--nav-height);
    --ess-hero-min-height: var(--hero-min-height);
    --ess-grid-columns: 12;
    --ess-gutter: var(--space-5);
    --ess-glass-field: var(--glass-field);
    --ess-glass-slab: var(--glass-slab);
    --ess-glass-lift: var(--glass-lift);
    --ess-glass-edge: var(--glass-edge);
    --ess-glass-shine: var(--glass-shine);
    --ess-glass-copy: var(--glass-copy);
    --ess-glass-muted: var(--glass-muted);
  }

  @media (min-resolution: 2dppx) {
    :root { --hairline: 0.5px; }
  }

  @media (min-resolution: 3dppx) {
    :root { --hairline: 0.33px; }
  }

  /* The observed owner palette does not change on P3 displays. */
}

@layer base {
  :root {
    accent-color: var(--seed-brand);
    caret-color: var(--text-primary);

    /* scrollbar-gutter below insets html/body on both edges even with no visible
       scrollbar. --bleed-inline is the counterpart escape for full-bleed landing
       sections: 100vw is unaffected by the reservation, so this margin cancels it. */

    --bleed-inline: calc(50% - 50vw);

    scrollbar-gutter: stable both-edges;
    scrollbar-color: var(--n-400) transparent;
    scrollbar-width: thin;
    font-optical-sizing: auto;
    font-synthesis: none;
    font-variant-ligatures: contextual;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }

  html { -webkit-tap-highlight-color: transparent; }

  body {
    background: var(--surface-canvas);
    color: var(--text-primary);
    font: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-ui);
    letter-spacing: var(--track-base);
  }

  ::selection {
    background: oklch(from var(--seed-brand) l c h / 0.28);
    color: var(--text-primary);
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: inherit;
  }

  :where(h1, h2, h3, .display) { text-wrap: balance; }
  :where(p, li, dd) { text-wrap: pretty; }
  :where(img, video, canvas, svg) { max-inline-size: 100%; block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ess-motion-enter: 0ms;
    --ess-motion-exit: 0ms;
  }
}