/*
 * MERIDIAN DESIGN TOKENS — "Signal white" (UI spec v1.0).
 * ---------------------------------------------------------------------------
 * Drop this file into any project and you have the Meridian look. These are the
 * canonical values, lifted verbatim from the Meridian app's index.css. Plain CSS
 * custom properties — no Tailwind, no build step required. (If you ARE on
 * Tailwind v4, the same values go in an `@theme {}` block as `--color-*`.)
 *
 * THE ONE RULE: the interface is grayscale. Colour appears ONLY where it carries
 * information — regime, gain/loss, provenance, a good/bad verdict. There is no
 * brand accent. Emphasis is weight and ink, never hue. No raw hex outside this
 * file.
 *
 * Contrast is enforced: ink-500 is the quietest readable text (>=4.5:1 on every
 * background, both themes); ink-300 is NON-TEXT only (hairlines, field borders,
 * dots) and is held to >=3:1. Never put text in ink-300.
 */

:root {
  color-scheme: light;

  /* Neutrals — the entire interface */
  --canvas: #faf9f7;        /* page background */
  --surface: #ffffff;       /* cards, panels, menus */
  --surface-sub: #f4f3f0;   /* table headers, hover, quiet fills */

  /* Rules are DECORATIVE dividers only (WCAG 1.4.11 exempt). Anything that must
     be SEEN to be used — a field boundary, a focus ring — uses ink-300. */
  --rule: #e4e2dc;          /* hairline divider */
  --rule-strong: #cfccc4;   /* card edge, stronger divider */

  --ink-900: #0b0b0b;       /* primary text */
  --ink-700: #3d3d3a;       /* secondary text */
  --ink-500: #6b6a65;       /* muted text — the quietest readable tone */
  --ink-300: #868681;       /* NON-TEXT only: hairlines, field borders, dots, dashes */

  /* Regime — rail, banner, hero card ONLY */
  --regime-on: #3b6d11;          /* risk-on (green) */
  --regime-on-tint: #eaf3de;
  --regime-caution: #57534e;     /* caution — slate/ink, NEVER yellow */
  --regime-caution-tint: #f5f5f4;
  --regime-off: #24425f;         /* risk-off — slate, NEVER red (red = lost money) */
  --regime-off-tint: #e8edf2;

  /* Performance — gains and losses only */
  --gain: #1a6f4c;
  --loss: #b0433f;

  /* Provenance — demo is the only hued tier (and reads via hatch + chip too) */
  --demo: #6f6a63;
  --demo-tint: #f7f7f5;

  /* Fonts */
  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Motion — short, functional; the app disables all of it under
     prefers-reduced-motion. */
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* Radius / weight constants used across components. */
  --radius-card: 10px;
  --radius-control: 8px;
  --rule-width: 0.5px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #0f0f0e;
  --surface: #171716;
  --surface-sub: #1f1f1d;
  --rule: #2e2e2b;
  --rule-strong: #43423e;
  --ink-900: #f2f1ee;
  --ink-700: #c6c4be;
  --ink-500: #8f8e88;
  --ink-300: #767670;
  --regime-on: #97c459;
  --regime-on-tint: #1c2a11;
  --regime-caution: #a8a29e;
  --regime-caution-tint: #262523;
  --regime-off: #85b7eb;
  --regime-off-tint: #0f1b27;
  --gain: #5dcaa5;
  --loss: #f09595;
  --demo: #a8a29e;
  --demo-tint: #262523;
}

/*
 * VERDICT SCALE — five colours, good→bad, for the optional "colour the numbers"
 * mode. OFF by default (Signal white is grayscale). The middle three bands are
 * solved at 3:1 (a documented exemption — a readable yellow cannot also clear
 * 4.5:1 on white); the two end bands ARE the gain/loss tokens and clear 4.5:1 so
 * money means the same thing in both themes.
 *
 * SPECIFICITY matters: a bare :root ties with [data-theme="dark"], so the light
 * values are guarded with :not([data-theme="dark"]) or dark silently loses.
 */
:root:not([data-theme="dark"]) {
  --v-good: #1a6f4c;
  --v-fairgood: #6f9200;
  --v-fair: #9f8400;
  --v-fairpoor: #cf6a00;
  --v-poor: #b0433f;
  /* Filled shapes (bars, chips, swatches) are graphical objects → 3:1, so they
     may be more saturated than the text set. */
  --vfill-good: #009b58;
  --vfill-fairgood: #6f9200;
  --vfill-fair: #998700;
  --vfill-fairpoor: #cf6a00;
  --vfill-poor: #d8362f;
}
[data-theme="dark"] {
  --v-good: #5dcaa5;
  --v-fairgood: #ccff33;
  --v-fair: #ffe600;
  --v-fairpoor: #ff9838;
  --v-poor: #f09595;
  --vfill-good: #00ff94;
  --vfill-fairgood: #bcf600;
  --vfill-fair: #fbdf00;
  --vfill-fairpoor: #ff8500;
  --vfill-poor: #ff6b66;
}

/*
 * SYSTEM DARK MODE — the third theme state. With no data-theme set, a Mac in
 * dark mode gets the dark values; data-theme="light" keeps light. Same values
 * as the two [data-theme="dark"] blocks above: change them together. This block
 * comes after the verdict block on purpose, since both selectors weigh the same.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --canvas: #0f0f0e;
    --surface: #171716;
    --surface-sub: #1f1f1d;
    --rule: #2e2e2b;
    --rule-strong: #43423e;
    --ink-900: #f2f1ee;
    --ink-700: #c6c4be;
    --ink-500: #8f8e88;
    --ink-300: #767670;
    --regime-on: #97c459;
    --regime-on-tint: #1c2a11;
    --regime-caution: #a8a29e;
    --regime-caution-tint: #262523;
    --regime-off: #85b7eb;
    --regime-off-tint: #0f1b27;
    --gain: #5dcaa5;
    --loss: #f09595;
    --demo: #a8a29e;
    --demo-tint: #262523;

    --v-good: #5dcaa5;
    --v-fairgood: #ccff33;
    --v-fair: #ffe600;
    --v-fairpoor: #ff9838;
    --v-poor: #f09595;
    --vfill-good: #00ff94;
    --vfill-fairgood: #bcf600;
    --vfill-fair: #fbdf00;
    --vfill-fairpoor: #ff8500;
    --vfill-poor: #ff6b66;
  }
}

/* Base document. Give body an explicit background so the canvas token always
   wins, and set tabular figures on everything mono. */
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
code, kbd, .mono, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* SVG <text> does not inherit `color`; without this it paints black in dark mode. */
svg text { fill: var(--ink-900); }

/*
 * TYPE SCALE (spec §1.2). Headlines and every comparable number are mono with
 * tabular figures so columns line up and digits never reflow.
 */
.text-headline { font-size: 44px; line-height: 1.05; font-weight: 400; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-title    { font-size: 24px; line-height: 1.2;  font-weight: 500; }
.text-section  { font-size: 15px; line-height: 1.3;  font-weight: 500; }
.text-metric   { font-size: 22px; line-height: 1.1;  font-weight: 500; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-body     { font-size: 14px; line-height: 1.6;  font-weight: 400; }
.text-data     { font-size: 13px; line-height: 1.4;  font-weight: 400; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-label    { font-size: 11px; line-height: 1.2;  font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
@media (max-width: 480px) { .text-headline { font-size: 34px; } }

/*
 * THE ONLY SHADOW is the focus ring. Elevation is a value step (surface over
 * canvas) plus a hairline border — never a drop shadow.
 */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3px var(--ink-900);
  border-radius: var(--radius-control);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation: none !important; }
}