/* Atlas landing tokens ("Atlas Clear"). The same values as platform/src/styles/tokens.css, which the landing does not
   load: keep the two in step. Light first; the dark theme is neutral graphite and follows prefers-color-scheme (or
   [data-theme="dark"]). Rules in style.css use only the semantic names below. */

/* Geist and Geist Mono (SIL OFL 1.1, /brand/fonts/Geist-OFL.txt). */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/brand/fonts/Geist-Variable.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/brand/fonts/GeistMono-Variable.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* Atlas Blue: the mark's ramp (blue-500 is the one action colour, white text 4.9:1) */
  --blue-50: #eef4ff; --blue-100: #dce8ff; --blue-200: #b9d3ff; --blue-300: #8ec2ff; --blue-400: #47a5fc;
  --blue-500: #2468ee; --blue-600: #1250d9; --blue-700: #1a3d98; --blue-800: #0f235e; --blue-900: #0a1840;

  /* Paper and ink: the light scale (default) */
  --paper: #ffffff; --paper-tint: #f5f7fa; --paper-sunken: #eef1f6; --paper-line: #dce0e8; --paper-hair: #eaedf2;
  --ink-900: #0a0d14; --ink-800: #161b26; --ink-700: #2b3242; --ink-600: #566072; --ink-500: #5f6879; --ink-400: #9aa1af;

  /* Graphite: the dark theme's neutral scale */
  --graphite-1000: #060708; --graphite-950: #0a0b0d; --graphite-900: #121418; --graphite-850: #181b20; --graphite-800: #20242b;
  --graphite-700: #2b3039; --graphite-600: #3a404b; --graphite-500: #6b7382; --graphite-400: #959ca8; --graphite-300: #aab0bb;
  --graphite-200: #c9ced6; --graphite-100: #f5f6f8;

  /* Semantic: light */
  --bg-app: var(--paper);
  --bg-surface: var(--paper);
  --bg-surface-raised: var(--paper-tint);
  --bg-surface-selected: var(--paper-sunken);
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-tertiary: var(--ink-500);
  --text-brand: var(--blue-600);
  --text-inverse: #ffffff;
  --border-subtle: var(--paper-hair);
  --border-default: var(--paper-line);
  --border-strong: #7a8396;
  --icon-default: var(--ink-900);
  --icon-muted: var(--ink-500);
  --icon-accent: var(--blue-600);
  --focus: var(--blue-600);
  --focus-ring: 0 0 0 3px rgba(36,104,238,.28);
  --success: #0e7a4d; --success-soft: #e3f7ec;
  --action-primary-bg: var(--blue-500); --action-primary-fg: #ffffff; --action-primary-bg-hover: var(--blue-600); --action-primary-bg-active: var(--blue-700);
  --action-secondary-bg: var(--paper-sunken); --action-secondary-fg: var(--ink-900); --action-secondary-bg-hover: #e3e7ee;
  --action-tertiary-fg: var(--blue-600);
  --shadow-sm: 0 1px 2px rgba(10,13,20,.06), 0 2px 6px rgba(10,13,20,.05);
  --shadow-md: 0 6px 18px rgba(10,13,20,.09);
  --shadow-lg: 0 16px 40px rgba(10,13,20,.12);

  /* Landing-only surfaces: the hero's soft tint panel and the near-black security band */
  --landing-tint: #f1f5fc;
  --landing-band-bg: var(--graphite-950);
  --landing-band-text: #ffffff;
  --landing-band-text-2: var(--graphite-300);
  --landing-band-line: rgba(255,255,255,.12);
  --landing-band-chip: rgba(255,255,255,.08);
  --landing-band-accent: var(--blue-300);
  --landing-island: #0a0b0d;

  /* Accent palette "Spectrum" (the same names as the app and design system). Six families, each subtle / bold / ink, so
     the palette can be swapped by changing values only. Accents are decoration in blocks: section panels, step numerals,
     feature tiles, illustration shapes and icon chips. Atlas Blue stays the only action colour; no accent means a status.
     Text on a subtle tint uses the family's ink (4.5:1 or more). Text on a bold fill is --accent-on-bold (near-black),
     except violet and slate, which take --accent-on-bold-inverse (white). */
  --accent-sky-subtle: #e6f3ff;    --accent-sky-bold: #47a5fc;    --accent-sky-ink: #0b5cad;
  --accent-mint-subtle: #dcf7ee;   --accent-mint-bold: #2fc58f;   --accent-mint-ink: #0d6b4b;
  --accent-violet-subtle: #eeeaff; --accent-violet-bold: #6a48f2; --accent-violet-ink: #4b2fd1;
  --accent-sun-subtle: #fff4d6;    --accent-sun-bold: #ffc53d;    --accent-sun-ink: #7a5200;
  --accent-coral-subtle: #ffe9e2;  --accent-coral-bold: #ff7a59;  --accent-coral-ink: #a33a1d;
  --accent-slate-subtle: #eef1f6;  --accent-slate-bold: #566072;  --accent-slate-ink: #2b3242;
  --accent-on-bold: #0a0d14; --accent-on-bold-inverse: #ffffff;

  /* Device frames drawn in CSS (titanium edge, black bezel, the island) */
  --device-edge: #b9bdc3; --device-edge-hi: #e6e8eb; --device-edge-lo: #8b9097; --device-bezel: #050506;
  --device-island: #000000; --device-lens: #1b2233;

  /* Type: one family */
  --font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-hero: clamp(44px, 6vw, 76px);
  --text-section: clamp(32px, 3.6vw, 48px);
  --text-title-3: 18px; --text-body-l: 17px; --text-body: 15px; --text-body-s: 14px; --text-label: 13px; --text-caption: 12px;
  --tracking-display: -.035em; --tracking-tight: -.02em;

  /* Space, layout, controls */
  --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px;
  --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-11: 64px; --space-12: 80px; --space-13: 96px; --space-14: 128px;
  --gutter-mobile: 24px; --gutter-web: 32px; --content-max: 1200px;
  --control-lg: 56px; --control-md: 48px; --control-sm: 44px; --tap-min: 44px;

  /* Shape */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px;
  --radius-card: 16px; --radius-pill: 999px;

  /* Motion */
  --dur-fast: 140ms; --dur-base: 220ms; --dur-reveal: 700ms;
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-enter: cubic-bezier(.16,1,.3,1);
  --press-scale: .97;
}

/* Dark: the system setting, or [data-theme="dark"] */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-app: var(--graphite-950); --bg-surface: var(--graphite-900); --bg-surface-raised: var(--graphite-850); --bg-surface-selected: var(--graphite-800);
    --text-primary: var(--graphite-100); --text-secondary: var(--graphite-300); --text-tertiary: var(--graphite-400); --text-brand: var(--blue-300); --text-inverse: var(--ink-900);
    --border-subtle: rgba(255,255,255,.07); --border-default: rgba(255,255,255,.13); --border-strong: #6b7382;
    --icon-default: var(--graphite-100); --icon-muted: var(--graphite-400); --icon-accent: var(--blue-300);
    --focus: var(--blue-300); --focus-ring: 0 0 0 3px rgba(142,194,255,.36);
    --success: #3dd68c; --success-soft: rgba(61,214,140,.14);
    --action-secondary-bg: var(--graphite-800); --action-secondary-fg: var(--graphite-100); --action-secondary-bg-hover: var(--graphite-700);
    --action-tertiary-fg: var(--blue-300);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.45); --shadow-md: 0 8px 24px rgba(0,0,0,.5); --shadow-lg: 0 20px 48px rgba(0,0,0,.6);
    --landing-tint: var(--graphite-900);
    --landing-band-bg: var(--graphite-850);
    --landing-band-line: rgba(255,255,255,.09);
    --landing-island: #000000;

    /* Dark: subtle = the bold at ~16% over graphite (slate tints from graphite-400, its bold is too dark to read at 16%); ink = a light tint, 4.5:1 or more on it */
    --accent-sky-subtle: rgba(71,165,252,.16);    --accent-sky-ink: #a9d4ff;
    --accent-mint-subtle: rgba(47,197,143,.16);   --accent-mint-ink: #86e8c3;
    --accent-violet-subtle: rgba(106,72,242,.18); --accent-violet-ink: #c9bcff;
    --accent-sun-subtle: rgba(255,197,61,.16);    --accent-sun-ink: #ffd877;
    --accent-coral-subtle: rgba(255,122,89,.16);  --accent-coral-ink: #ffb9a6;
    --accent-slate-subtle: rgba(149,156,168,.16); --accent-slate-ink: #c9ced6;
    --device-edge: #4a4e55; --device-edge-hi: #7a7f87; --device-edge-lo: #2c2f34;
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: var(--graphite-950); --bg-surface: var(--graphite-900); --bg-surface-raised: var(--graphite-850); --bg-surface-selected: var(--graphite-800);
  --text-primary: var(--graphite-100); --text-secondary: var(--graphite-300); --text-tertiary: var(--graphite-400); --text-brand: var(--blue-300); --text-inverse: var(--ink-900);
  --border-subtle: rgba(255,255,255,.07); --border-default: rgba(255,255,255,.13); --border-strong: #6b7382;
  --icon-default: var(--graphite-100); --icon-muted: var(--graphite-400); --icon-accent: var(--blue-300);
  --focus: var(--blue-300); --focus-ring: 0 0 0 3px rgba(142,194,255,.36);
  --success: #3dd68c; --success-soft: rgba(61,214,140,.14);
  --action-secondary-bg: var(--graphite-800); --action-secondary-fg: var(--graphite-100); --action-secondary-bg-hover: var(--graphite-700);
  --action-tertiary-fg: var(--blue-300);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45); --shadow-md: 0 8px 24px rgba(0,0,0,.5); --shadow-lg: 0 20px 48px rgba(0,0,0,.6);
  --landing-tint: var(--graphite-900);
  --landing-band-bg: var(--graphite-850);
  --landing-band-line: rgba(255,255,255,.09);
  --landing-island: #000000;

  /* Dark: subtle = the bold at ~16% over graphite (slate tints from graphite-400, its bold is too dark to read at 16%); ink = a light tint, 4.5:1 or more on it */
  --accent-sky-subtle: rgba(71,165,252,.16);    --accent-sky-ink: #a9d4ff;
  --accent-mint-subtle: rgba(47,197,143,.16);   --accent-mint-ink: #86e8c3;
  --accent-violet-subtle: rgba(106,72,242,.18); --accent-violet-ink: #c9bcff;
  --accent-sun-subtle: rgba(255,197,61,.16);    --accent-sun-ink: #ffd877;
  --accent-coral-subtle: rgba(255,122,89,.16);  --accent-coral-ink: #ffb9a6;
  --accent-slate-subtle: rgba(149,156,168,.16); --accent-slate-ink: #c9ced6;
  --device-edge: #4a4e55; --device-edge-hi: #7a7f87; --device-edge-lo: #2c2f34;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --press-scale: 1; }
}