/* ============================================================
   minimal_ui — design tokens
   A minimal, neutral UI kit. Light is the source of truth;
   dark overrides at the bottom.
   ============================================================ */

:root {
  /* --- Surfaces --- */
  --mui-bg: #fafafa;          /* page background */
  --mui-surface: #ffffff;     /* cards, panels */
  --mui-surface-2: #f4f4f5;   /* subtle fills, inner rows, unfilled bars */
  --mui-surface-3: #ededee;   /* hover / pressed fills */

  /* --- Ink --- */
  --mui-ink: #18181b;         /* primary text */
  --mui-ink-2: #52525b;       /* secondary text */
  --mui-muted: #71717a;       /* muted labels, captions */
  --mui-faint: #a1a1aa;       /* faint labels, disabled */
  --mui-on-ink: #fafafa;      /* text on an always-dark surface (the highlight block) */
  --mui-on-ink-muted: #a1a1aa;/* muted text on always-dark surfaces */

  /* Always-dark surface that does NOT flip per theme — the highlight panel is a
     branded dark block in both light and dark mode. (--mui-ink flips, so it
     can't be used for this.) */
  --mui-ink-fixed: #18181b;

  /* --- Inverse fill --- solid high-contrast fill that FLIPS per theme.
     Use for primary buttons, active chips, filled badges, checked controls.
     (Distinct from --mui-ink, which is always dark: the highlight panel uses this.) */
  --mui-inverse: #18181b;        /* black in light, white in dark */
  --mui-on-inverse: #fafafa;     /* text on the inverse fill */

  /* --- Border --- */
  --mui-border: #e4e4e7;      /* hairline borders */
  --mui-border-2: #d4d4d8;    /* stronger dividers */

  /* --- Accents --- */
  --mui-accent: #18181b;      /* default bar / active accent (near-black) */
  --mui-pos: #16a34a;         /* positive / success */
  --mui-pos-bg: #f0fdf4;
  --mui-neg: #dc2626;         /* negative / error */
  --mui-neg-bg: #fef2f2;
  --mui-warn: #eab851;        /* warning (yellow) — for fills/stripes/accents */
  --mui-warn-ink: #a16207;    /* warning TEXT — darker, legible on --mui-warn-bg */
  --mui-warn-bg: #fefce8;

  /* --- Chart series (donut / bars) --- */
  --mui-chart-1: #18181b;     /* strongest / filled */
  --mui-chart-2: #d4d4d8;     /* remainder / track */
  --mui-chart-3: #a1a1aa;

  /* --- Radius --- */
  --mui-radius-lg: 12px;      /* outer cards / panels */
  --mui-radius: 10px;         /* cards */
  --mui-radius-sm: 8px;       /* inner cards, callouts */
  --mui-radius-xs: 6px;       /* badges, small controls */
  --mui-radius-pill: 999px;   /* chips, pills */

  /* --- Type --- */
  --mui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              Helvetica, Arial, sans-serif;
  --mui-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  --mui-fs-11: 0.6875rem;   /* 11px eyebrows/labels */
  --mui-fs-12: 0.75rem;     /* 12px captions */
  --mui-fs-13: 0.8125rem;   /* 13px body-small */
  --mui-fs-14: 0.875rem;    /* 14px body */
  --mui-fs-16: 1rem;        /* 16px card title */
  --mui-fs-20: 1.25rem;     /* 20px section title */
  --mui-fs-24: 1.5rem;      /* 24px heading */

  --mui-lh: 1.5;
  --mui-lh-tight: 1.3;
  --mui-track-label: 0.06em; /* uppercase label letter-spacing */

  /* --- Elevation --- */
  --mui-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04);
  --mui-shadow: 0 1px 3px rgba(24, 24, 27, 0.06),
                0 1px 2px rgba(24, 24, 27, 0.04);
  --mui-shadow-halo: 0 0 0 1px var(--mui-border),
                     0 8px 40px -12px rgba(24, 24, 27, 0.18);

  /* --- Spacing scale --- */
  --mui-sp-1: 4px;
  --mui-sp-2: 8px;
  --mui-sp-3: 12px;
  --mui-sp-4: 16px;
  --mui-sp-5: 20px;
  --mui-sp-6: 24px;
  --mui-sp-8: 32px;

  /* --- Motion --- */
  --mui-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --mui-dur: 140ms;

  /* --- Focus ring --- */
  --mui-focus: 0 0 0 3px color-mix(in srgb, var(--mui-ink) 18%, transparent);
  --mui-control-h: 38px;      /* default form control height */
}

/* ============================================================
   Dark mode — flips surfaces/ink/border.
   The highlight block stays dark in both themes via --mui-ink-fixed.
   No dark reference existed; values chosen to keep the same contrast
   relationships as light.
   ============================================================ */

:root[data-theme="dark"] {
  --mui-bg: #09090b;
  --mui-surface: #18181b;
  --mui-surface-2: #27272a;
  --mui-surface-3: #3f3f46;

  --mui-ink: #fafafa;
  --mui-ink-2: #d4d4d8;
  --mui-muted: #a1a1aa;
  --mui-faint: #71717a;
  --mui-on-ink: #fafafa;      /* highlight block stays dark — text stays light */
  --mui-on-ink-muted: #a1a1aa;

  /* inverse flips: white fill, dark text — so primary buttons stay readable */
  --mui-inverse: #fafafa;
  --mui-on-inverse: #18181b;

  --mui-border: #27272a;
  --mui-border-2: #3f3f46;

  --mui-accent: #fafafa;      /* bars invert to light-on-dark */
  --mui-pos: #4ade80;
  --mui-pos-bg: #14261a;
  --mui-neg: #f87171;
  --mui-neg-bg: #2a1515;
  --mui-warn: #fbbf24;
  --mui-warn-ink: #fcd34d;    /* bright yellow reads fine as text on dark warn bg */
  --mui-warn-bg: #2a2410;

  --mui-chart-1: #fafafa;
  --mui-chart-2: #3f3f46;
  --mui-chart-3: #71717a;

  --mui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --mui-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --mui-shadow-halo: 0 0 0 1px var(--mui-border),
                     0 8px 40px -12px rgba(0, 0, 0, 0.7);

  --mui-focus: 0 0 0 3px color-mix(in srgb, var(--mui-ink) 30%, transparent);
}