/* MYRA design tokens — THE single source of truth (DESIGN.md §1: tokens are law).
   Linked by public/cockpit.html and by the Next app (app/layout.tsx) so every surface draws
   palette, radii, shadows and fonts from this one file. No raw hex in components — if a colour
   is not defined here, it does not ship. Values are the DESIGN.md §1 monochrome editorial palette.
   Type scale (six sizes): 11 / 13 / 15 / 17 / 22 / 28px · weights 400 / 600 · 8px spacing grid. */
:root {
  color-scheme: light;
  /* Canvas + text — DESIGN.md §1 */
  --bone: #f7f7f5; /* quiet neutral canvas */
  --paper: var(
    --bone
  ); /* DEPRECATED name — use --bone; rename sweep in M-…-04 */
  --surface: #ffffff;
  --surface-2: #ffffff;
  /* Authored email content must remain faithful while the surrounding app changes theme. */
  --email-canvas: #ffffff;
  --email-ink: #171719;
  --email-line: #c9c9c5;
  --ink: #171719;
  --ink-soft: #56565c;
  --ink-faint: #74747a; /* AA for normal text on both bone and surface */
  --line: #c9c9c5; /* visible control boundary; decorative separators use --line-soft */
  --line-soft: #e7e7e3;
  /* Quiet hierarchy for the executive brief. These are aliases of the canonical palette, not
     additional colours: raised work stays white; inset/contextual work uses the soft neutral. */
  --surface-raised: var(--surface);
  --surface-inset: var(--fill-soft);
  /* Semantic states — colour is semantic or absent (muted, never neon) */
  --ok: #3f735d;
  --warn: #a66d2f;
  --alert: #a84e3b;
  --taupe: #665747; /* brand accent — the "considered / secondary" state (fit FALLBACK verdict) */
  /* Pipeline / stage-chip hues — distinct colours for investor STAGES, job stage/status and entity
     dots. Tokenised so the raw hexes live here (theme.css) instead of drifting inline in cockpit.html. */
  --stage-taupe: #938f85;
  --stage-blue: #3c79b0;
  --stage-purple: #8268c9;
  --stage-teal: #0ea59e;
  --stage-rust: #c2603f;
  --stage-gray: #8a8a8a;
  --stage-rose: #b03c79;
  --stage-teal-bright: #1aa6a6;
  /* Accent — carbon, used for selection, focus and primary consequence states. */
  --accent: #171719;
  --accent-light: #8a8a90;
  /* Soft neutral fill for hover / selected washes */
  --fill-soft: #f0f0ed;
  /* DEPRECATED aliases — consumers migrate in the M-…-04 sweep, then these are deleted.
     They were never gradients; the names were wrong, not the values. */
  --grad: var(--ink);
  --grad-soft: var(--fill-soft);
  --teal: var(--accent); /* legacy name retained until the documented rename sweep */
  /* Channel identity glyph colours (data, not decoration) — under review in AUDIT.md */
  --gmail: #9c6f5e;
  --icloud: #6e8198;
  --zoom: #7e7e8c;
  --cal: #8e83a0;
  /* Shape — two radii only: 999px pills, 12px rects (DESIGN.md §1) */
  --radius: 12px;
  --radius-pill: 999px;
  --radius-sm: var(
    --radius
  ); /* DEPRECATED — a third radius does not exist; remove in M-…-04 */
  /* One shadow. Depth comes from hairlines, not shadow stacks. */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-lg: var(
    --shadow
  ); /* DEPRECATED — heavy drops collapse to the one shadow */
  /* Instrument Sans runs the interface; Source Serif 4 marks editorial hierarchy.
     System fallbacks keep restricted builds usable. */
  --font:
    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --serif:
    "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia,
    "Times New Roman", serif;
  --fs-base: 16px;
  --tabbar-h: 56px;
  --dock-h: 60px;
  --shell-header-h: 64px;
  --content-max: 1184px;
  /* Shared rhythm and motion. Component CSS consumes these instead of inventing local values. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --motion-duration: 160ms;
  --motion-easing: ease-out;
  /* Rail width — drives the @myra dock's left offset so it stays in the content column and never
     overlaps the rail. 62px collapsed / 0 mobile are set in cockpit.html. */
  --rail-w: 232px;
}

html,
body {
  background: var(--bone);
  color: var(--ink);
}

/* Optional inverse. Light remains the deliberate default; dark is an exact semantic-token
   inversion, not a second collection of component overrides. Near-black layers retain visible
   separation without glare; focus and selection remain monochrome under Decision 0005. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bone: #0f1012;
  --surface: #141517;
  --surface-2: #18191d;
  --ink: #f1f1f3;
  --ink-soft: #b2b3ba;
  --ink-faint: #85868f;
  --line: #38393f;
  --line-soft: #292a2f;
  --surface-raised: #141517;
  --surface-inset: #1a1b1f;
  --ok: #69a981;
  --warn: #d0a15c;
  --alert: #d47764;
  --taupe: #b4a28e;
  --accent: #f1f1f3;
  --accent-light: #85868f;
  --fill-soft: #1b1c21;
  --gmail: #c88970;
  --icloud: #8ba4bf;
  --zoom: #a0a0b5;
  --cal: #a79ac2;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.34);
}

/* Mobile legibility (Display-Size directive): darken secondary / meta text one step for contrast.
   Values stay on the DESIGN.md palette — each tier steps down to the next darker token
   (--ink-faint takes --ink-soft's canonical #56565C). */
@media (max-width: 640px) {
  :root {
    --ink-soft: var(--ink);
    --ink-faint: #56565c;
  }
  html[data-theme="dark"] {
    --ink-soft: var(--ink);
    --ink-faint: #b2b3ba;
  }
}