/* ============================================================
   DailyCheck design tokens — from the design handoff.
   Single set: light is :root, dark is [data-theme="dark"] plus
   an OS-preference fallback. Change a colour once, both follow.

   Loaded BEFORE app.css. The bridge at the bottom maps the token
   names the existing templates already use onto this palette, so
   the whole app restyles without rewriting markup.
   ============================================================ */
:root {
  --surface:#F4F5F6;  --elevated:#FFFFFF;  --border:#E1E3E6;
  --text-primary:#101215; --text-secondary:#4A4F56; --text-muted:#8A9097;
  --accent:#4B48DB;   --accent-soft:#ECECFB;
  --ok-fill:#E5F3EC;   --ok-border:#9FD6BE;   --ok-text:#0F6B4F;
  --warn-fill:#FBF1DC; --warn-border:#E4C989; --warn-text:#8A5A00;
  --bad-fill:#FBE9E7;  --bad-border:#EBB1AB;  --bad-text:#B3261E;
  --info-fill:#E7F0FB; --info-border:#A9C8EE; --info-text:#1C5FBF;
  --neutral-fill:#EEF0F2; --neutral-border:#D4D7DB; --neutral-text:#5C6269;
  --bar-fill:#B9BEC5;
  --radius-control:6px; --radius-card:10px;
  --shadow-overlay:0 8px 24px rgba(16,18,21,.12);
  /* Resting cards: barely lifted, so panels read as panels without looking heavy. */
  --shadow-card:0 1px 2px rgba(16,18,21,.04), 0 2px 8px rgba(16,18,21,.04);
  --page-glow:rgba(75,72,219,.05);
  --font-ui:'Instrument Sans',system-ui,sans-serif;
  --font-num:'IBM Plex Mono',ui-monospace,monospace;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --row-h:32px;
}
[data-theme="dark"] {
  --surface:#0D0F11;  --elevated:#16191C;  --border:#282C31;
  --text-primary:#F2F3F4; --text-secondary:#B7BCC2; --text-muted:#7E848B;
  --accent:#9E99FF;   --accent-soft:#26264A;
  --ok-fill:#12251E;   --ok-border:#1F5C46;   --ok-text:#4ED4A6;
  --warn-fill:#2A2210; --warn-border:#6E5522; --warn-text:#F5B84A;
  --bad-fill:#2C1715;  --bad-border:#7A3630;  --bad-text:#FF7A70;
  --info-fill:#14202F; --info-border:#2B4E7E; --info-text:#7DB0FF;
  --neutral-fill:#1C2024; --neutral-border:#3A3F45; --neutral-text:#A6ACB3;
  --bar-fill:#4A4F56;
  --shadow-overlay:0 8px 24px rgba(0,0,0,.5);
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.035), 0 1px 2px rgba(0,0,0,.35);
  --page-glow:rgba(158,153,255,.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --surface:#0D0F11;  --elevated:#16191C;  --border:#282C31;
    --text-primary:#F2F3F4; --text-secondary:#B7BCC2; --text-muted:#7E848B;
    --accent:#9E99FF;   --accent-soft:#26264A;
    --ok-fill:#12251E;   --ok-border:#1F5C46;   --ok-text:#4ED4A6;
    --warn-fill:#2A2210; --warn-border:#6E5522; --warn-text:#F5B84A;
    --bad-fill:#2C1715;  --bad-border:#7A3630;  --bad-text:#FF7A70;
    --info-fill:#14202F; --info-border:#2B4E7E; --info-text:#7DB0FF;
    --neutral-fill:#1C2024; --neutral-border:#3A3F45; --neutral-text:#A6ACB3;
    --bar-fill:#4A4F56;
    --shadow-overlay:0 8px 24px rgba(0,0,0,.5);
    --shadow-card:inset 0 1px 0 rgba(255,255,255,.035), 0 1px 2px rgba(0,0,0,.35);
    --page-glow:rgba(158,153,255,.06);
  }
}

/* ------------------------------------------------------------
   COMPATIBILITY LAYER
   app.css was migrated to the design vocabulary above
   (--elevated for cards, --text-secondary / --text-muted for
   type). These are the few names it still uses that the design
   system doesn't define — all derived, so changing a colour in
   the palette above still flows everywhere.

   NOTE: in this design system `--surface` is the PAGE background
   and `--elevated` is the CARD background. That is the opposite
   of the old convention — don't swap them back.
   ------------------------------------------------------------ */
:root, [data-theme="dark"],
:root:not([data-theme="light"]):not([data-theme="dark"]) {
  /* Structure */
  --bg: var(--surface);
  --surface-2: var(--neutral-fill);
  --surface-hover: var(--neutral-fill);
  --border-strong: var(--neutral-border);
  --text: var(--text-primary);

  /* Accent */
  --primary: var(--accent);
  --primary-600: color-mix(in srgb, var(--accent) 84%, black);
  --primary-soft: var(--accent-soft);
  --on-primary: #ffffff;
  --ring: color-mix(in srgb, var(--accent) 32%, transparent);

  /* Semantic ramps (text tone + soft fill) */
  --green: var(--ok-text);     --green-soft: var(--ok-fill);
  --amber: var(--warn-text);   --amber-soft: var(--warn-fill);
  --red: var(--bad-text);      --red-soft: var(--bad-fill);
  --blue: var(--info-text);    --blue-soft: var(--info-fill);

  /* Shape + depth */
  --radius: var(--radius-card);
  --radius-sm: var(--radius-control);
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16,18,21,.06);
  --shadow: var(--shadow-overlay);
  --shadow-lg: var(--shadow-overlay);

  /* Legacy sp-8 is the design's sp-7 */
  --sp-8: var(--sp-7);

  /* Layout */
  --sidebar-w: 248px;
  --content-max: 1200px;
  --bg-glow: transparent;   /* the design is flat — no page glow */
}