/* ============================================================
   FluxGeko design tokens — "Machined Terminal" (2026-08-26)
   Source of truth: redesign/direction/direction.md
   Scopes:
     :root / .theme-dark      → dark product (default)
     [data-theme="light"] / .theme-light → light marketing shell
   A .theme-dark wrapper re-enters the product world inside a
   light page (embedded dark product cards).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400..900&family=Spline+Sans+Mono:wght@300..700&display=swap');

:root {
  /* ---------- primitives · ink (dark surfaces) ---------- */
  --ink-950: #05060A;
  --ink-900: #0A0C12;
  --ink-850: #10131B;
  --ink-800: #161A25;
  --ink-700: #232A3B;

  /* ---------- primitives · paper (light surfaces) ---------- */
  --paper-0: #F6F7FB;
  --paper-1: #FFFFFF;
  --paper-2: #EFF1F8;
  --paper-3: #E6E9F2;

  /* ---------- primitives · brand blue ramp (#487CFF = logo truth) ---------- */
  --blue-300: #A8C3FF;
  --blue-400: #8FB0FF;
  --blue-500: #6E99FF;
  --blue-600: #487CFF;
  --blue-700: #3A63E8;
  --blue-800: #2E53D1;
  --blue-900: #22409E;
  --blue-rgb: 72 124 255;

  /* ---------- primitives · market + system (THE one pair) ---------- */
  --green-500: #23BA75;  --green-rgb: 35 186 117;
  --red-500:   #F5395E;  --red-rgb: 245 57 94;
  --amber-500: #E8A33D;  --amber-rgb: 232 163 61;

  /* ---------- type ---------- */
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-2xs: 11px;   /* micro data labels, uppercase mono */
  --fs-xs:  12px;   /* table cells, hints */
  --fs-sm:  13px;   /* app base */
  --fs-md:  14px;   /* default body */
  --fs-lg:  16px;   /* marketing body */
  --fs-xl:  20px;   /* panel titles */
  --fs-2xl: 24px;   /* H3 / page titles */
  --fs-3xl: 32px;   /* H2 app */
  --fs-4xl: 44px;   /* marketing H2, plan prices */
  --fs-5xl: 64px;   /* landing display */

  --w-body: 400;
  --w-medium: 500;
  --w-heading: 520;
  --w-strong: 560;
  --w-display: 480;
  --w-max: 640;     /* armed-danger states only */

  --track-label: 0.08em;
  --track-display: -0.02em;

  /* ---------- spacing (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 48px; --sp-10: 64px; --sp-11: 96px; --sp-12: 128px;
  --gap: 12px;
  --page-pad: 20px;

  /* ---------- radius ---------- */
  --r-1: 4px;      /* badges, tiny chips */
  --r-2: 8px;      /* buttons, inputs, segmented */
  --r-3: 12px;     /* cards, widgets, tables, toasts */
  --r-4: 16px;     /* modals, marketing product cards */
  --r-pill: 999px; /* status pills ONLY */

  /* ---------- motion ---------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 120ms;
  --t-med: 200ms;
  --t-slow: 320ms;

  /* ---------- controls ---------- */
  --ctrl-h: 32px;
  --ctrl-h-lg: 44px;
  --ctrl-h-dense: 26px; /* chart toolbar only */
}

/* ============================================================
   Semantic — DARK product (default)
   ============================================================ */
:root,
.theme-dark {
  --bg: var(--ink-950);
  --surface: var(--ink-900);
  --surface-2: var(--ink-850);
  --surface-3: var(--ink-800);

  --text: #F2F4F8;
  --text-2: #9BA3B5;
  --text-3: #6B7488;

  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);

  --accent: var(--blue-600);        /* identity: logo, active, chart accent */
  --accent-text: var(--blue-400);   /* accent-colored text (AA on dark) */
  --accent-cta: var(--blue-700);    /* button fills (white label passes AA) */
  --accent-cta-hover: var(--blue-800);
  --accent-wash: rgb(var(--blue-rgb) / 0.10);
  --accent-wash-strong: rgb(var(--blue-rgb) / 0.18);

  --up: var(--green-500);
  --down: var(--red-500);
  --danger: var(--red-500);         /* one red family, no second red */
  --warn: var(--amber-500);
  --up-wash: rgb(var(--green-rgb) / 0.08);
  --down-wash: rgb(var(--red-rgb) / 0.08);
  --warn-wash: rgb(var(--amber-rgb) / 0.10);

  --ring: 0 0 0 2px rgb(var(--blue-rgb) / 0.45);
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-deep-card: 0 24px 64px rgba(16, 24, 48, 0.12);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  color-scheme: dark;
}

/* A .theme-dark wrapper embedded in the light shell must also re-apply
   the text color — custom properties swap above, but the light body's
   literal color would otherwise inherit into the dark card. */
.theme-dark {
  color: var(--text);
}

/* ============================================================
   Semantic — LIGHT marketing shell
   ============================================================ */
[data-theme="light"],
.theme-light {
  --bg: var(--paper-0);
  --surface: var(--paper-1);
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);

  --text: #0B0E16;
  --text-2: #4A5164;
  --text-3: #7A8194;

  --border: rgba(11, 14, 22, 0.10);
  --border-strong: rgba(11, 14, 22, 0.18);

  --accent: var(--blue-600);
  --accent-text: var(--blue-800);   /* AA on paper */
  --accent-cta: var(--blue-700);
  --accent-cta-hover: var(--blue-800);
  --accent-wash: rgb(var(--blue-rgb) / 0.08);
  --accent-wash-strong: rgb(var(--blue-rgb) / 0.15);

  /* Market red/green render only on dark surfaces (see direction.md §1).
     Values kept identical here so nothing breaks if a component leaks. */
  --up: var(--green-500);
  --down: var(--red-500);
  --danger: var(--red-500);
  --warn: #B07714;                  /* amber as readable text on paper */
  --up-wash: rgb(var(--green-rgb) / 0.08);
  --down-wash: rgb(var(--red-rgb) / 0.08);
  --warn-wash: rgb(var(--amber-rgb) / 0.12);

  --ring: 0 0 0 2px rgb(var(--blue-rgb) / 0.35);
  --shadow-overlay: 0 16px 48px rgba(16, 24, 48, 0.16);
  --shadow-deep-card: 0 24px 64px rgba(16, 24, 48, 0.12);
  --highlight: none;

  color-scheme: light;
}