/* ============================================================================
   Financeboard v2 — design tokens
   ----------------------------------------------------------------------------
   One place for every decision that repeats. Components below reference roles
   (--surface-2, --space-4, --radius-md), never raw values, so light/dark and
   density are changed here rather than in forty places.

   Type, spacing, radius and elevation are SCALES, not ad-hoc numbers: a value
   that is not on the scale is a bug, because it is what makes an interface read
   as assembled rather than designed.

   No web fonts on purpose. The pages navigate without a network round-trip and
   a font request would put a blocking dependency back in front of first paint;
   the system stack is doing the work through a real type scale, tracking, and
   tabular figures instead.
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- type scale (1.2 minor third, 15px base) --------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  21px;
  --text-2xl: 26px;
  --text-3xl: 32px;
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.011em;
  --tracking-wide:   0.06em;

  /* --- spacing rhythm (4px base) ---------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;

  /* --- radii ------------------------------------------------------------- */
  --radius-xs: 5px;  --radius-sm: 8px;  --radius-md: 11px;
  --radius-lg: 15px; --radius-pill: 999px;

  /* --- elevation: one ramp, used by role, never improvised --------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(16, 22, 33, .05), 0 1px 1px rgba(16, 22, 33, .03);
  --shadow-2: 0 2px 6px rgba(16, 22, 33, .06), 0 1px 2px rgba(16, 22, 33, .04);
  --shadow-3: 0 12px 28px -8px rgba(16, 22, 33, .16), 0 4px 10px -4px rgba(16, 22, 33, .08);

  /* --- surfaces & ink ---------------------------------------------------- */
  --canvas:      #f4f5f7;   /* page plane */
  --surface-1:   #ffffff;   /* cards */
  --surface-2:   #fafbfc;   /* inset areas, table headers */
  --surface-3:   #eef0f4;   /* hover wash */
  --ink-1:       #0d1117;   /* primary text */
  --ink-2:       #4a5261;   /* secondary text */
  --ink-3:       #7b8494;   /* muted, axis labels */
  --line-1:      #e3e6ec;   /* hairline borders */
  --line-2:      #d3d8e0;   /* stronger dividers */
  --ring:        #2a78d6;   /* focus */

  /* --- brand / accents --------------------------------------------------- */
  --accent:        #1f6fd0;
  --accent-hover:  #1a5fb4;
  --accent-soft:   #e8f0fc;
  --accent-ink:    #ffffff;

  /* --- data-viz palette (validated; do not re-pick casually) ------------- */
  --series-1: #2a78d6;  --series-2: #eb6834;  --series-3: #1baf7a;
  --series-4: #eda100;  --series-5: #e87ba4;  --series-6: #008300;
  --status-good: #0ca30c;    --status-warning: #fab219;
  --status-serious: #ec835a; --status-critical: #d03b3b;
  --success-ink: #0a7d31;
  --danger-ink:  #b42318;
  --grid:  #e8eaef;
  --axis:  #c9ced8;
  --seq-strong: #184f95;  --seq-empty: #f1f3f7;  --on-strong: #ffffff;

  /* --- motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in:  cubic-bezier(.55, .06, .68, .19);
  --dur-1: 120ms;   /* state change */
  --dur-2: 200ms;   /* enter */
  --dur-3: 280ms;   /* overlay */

  --z-header: 20;
  --z-popover: 60;
  --z-tooltip: 80;
}

/* Dark is a designed set of steps for a dark surface, not an inversion:
   surfaces lift with light, ink desaturates, and the data hues take their own
   dark-surface steps. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) { color-scheme: dark; }
  :root:where(:not([data-theme="light"])) {
    --canvas:    #0c0e12;
    --surface-1: #14171d;
    --surface-2: #191d24;
    --surface-3: #222731;
    --ink-1:     #f2f4f8;
    --ink-2:     #a8b1c1;
    --ink-3:     #78818f;
    --line-1:    #252a33;
    --line-2:    #333a45;
    --ring:      #4f9bee;

    --accent:       #3d8ae4;
    --accent-hover: #549af0;
    --accent-soft:  #17263a;
    --accent-ink:   #06101d;

    --series-1: #3987e5;  --series-2: #d95926;  --series-3: #199e70;
    --series-4: #c98500;  --series-5: #d55181;  --series-6: #21a021;
    --success-ink: #3ecf6b;
    --danger-ink:  #ff7b72;
    --grid:  #232830;
    --axis:  #39414d;
    --seq-strong: #3987e5;  --seq-empty: #1b1f26;  --on-strong: #0b0f14;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .5);
    --shadow-3: 0 16px 36px -10px rgba(0, 0, 0, .7), 0 4px 12px -4px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas:    #0c0e12;
  --surface-1: #14171d;
  --surface-2: #191d24;
  --surface-3: #222731;
  --ink-1:     #f2f4f8;
  --ink-2:     #a8b1c1;
  --ink-3:     #78818f;
  --line-1:    #252a33;
  --line-2:    #333a45;
  --ring:      #4f9bee;

  --accent:       #3d8ae4;
  --accent-hover: #54a0ef;
  --accent-soft:  #17263a;
  --accent-ink:   #06101d;

  --series-1: #3987e5;  --series-2: #d95926;  --series-3: #199e70;
  --series-4: #c98500;  --series-5: #d55181;  --series-6: #21a021;
  --success-ink: #3ecf6b;
  --danger-ink:  #ff7b72;
  --grid:  #232830;
  --axis:  #39414d;
  --seq-strong: #3987e5;  --seq-empty: #1b1f26;  --on-strong: #0b0f14;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .5);
  --shadow-3: 0 16px 36px -10px rgba(0, 0, 0, .7), 0 4px 12px -4px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}