/* ============================================================================
   whatsmysubs.com — design tokens
   ----------------------------------------------------------------------------
   Light theme lives on :root (the new default). Dark overrides are defined
   TWICE with identical values:
     1. @media (prefers-color-scheme: dark) guarded by :root:not([data-theme="light"])
        → system-dark users get dark unless they explicitly forced light;
     2. :root[data-theme="dark"]
        → the JS toggle can force dark even on a light system.
   "System" is the absence of a data-theme attribute. Never define a colour
   only inside the media query — every token has a :root value.

   Chart series colours are CVD-validated (dataviz six-checks) against the
   actual card surfaces: light #ffffff, dark #1e293b. Assign them to entities
   (currencies/categories) in FIXED order — never re-map when a series is
   filtered out. Slots 3/4/5 (light) and 6 (dark) sit below 3:1 against the
   surface: legal only because every chart keeps visible tick labels +
   tooltips and the data also exists as a table/CSV.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- colour: core ---- */
  --bg:            #f1f5f9;  /* page ground (slate-100) — lets white cards read as cards */
  --surface:       #ffffff;  /* cards, table, panels */
  --surface-2:     #f8fafc;  /* inset areas: expanded detail row, modal form background */
  --text:          #0f172a;  /* primary ink (slate-900) */
  --muted:         #475569;  /* secondary ink (slate-600, ≥4.5:1 on bg AND surface) */
  --faint:         #94a3b8;  /* disabled / placeholder only — never body text */
  --border:        #cbd5e1;  /* hairlines (slate-300) */
  --border-strong: #94a3b8;  /* input borders, hover borders */

  /* ---- colour: accent (sky, kept from the current identity) ---- */
  --accent:        #0284c7;  /* sky-600 — links & primary buttons; 4.9:1 on white */
  --accent-hover:  #0369a1;  /* sky-700 */
  --accent-soft:   #e0f2fe;  /* tinted chips/backgrounds */
  --on-accent:     #ffffff;  /* text on accent-filled controls */

  /* ---- colour: status (icon/border tone, strong text-on-soft, soft bg) ---- */
  --success:        #15803d;
  --success-strong: #166534;
  --success-soft:   #dcfce7;
  --danger:         #b91c1c;
  --danger-strong:  #991b1b;
  --danger-soft:    #fee2e2;
  --warning:        #a16207;
  --warning-strong: #854d0e;
  --warning-soft:   #fef3c7;

  /* ---- colour: chart & category series (fixed order, do not cycle) ---- */
  --series-1: #2a78d6;  /* blue    */
  --series-2: #eb6834;  /* orange  */
  --series-3: #1baf7a;  /* aqua    */
  --series-4: #eda100;  /* yellow  */
  --series-5: #e87ba4;  /* magenta */
  --series-6: #008300;  /* green   */
  --series-7: #4a3aa7;  /* violet  */
  --series-8: #e34948;  /* red     */
  --series-other: #64748b; /* "everything else" fold — deliberately grey */

  /* Currency → series aliases (fixed; a currency keeps its colour forever) */
  --chart-usd: var(--series-1);
  --chart-ils: var(--series-2);
  --chart-eur: var(--series-3);
  --chart-rub: var(--series-4);
  --chart-gbp: var(--series-5);
  --chart-other-currency: var(--series-other);

  /* Chart chrome (Chart.js reads these via getComputedStyle) */
  --chart-grid: #e2e8f0;
  --chart-tick: #475569;

  /* Category accent (chips only — text always carries identity, colour is
     reinforcement; 15 categories fold onto 8 slots + neutral, see SPEC) */
  --cat-streaming: var(--series-1);
  --cat-music:     var(--series-5);
  --cat-software:  var(--series-7);
  --cat-gaming:    var(--series-8);
  --cat-cloud:     var(--series-3);
  --cat-ai:        var(--series-2);
  --cat-food:      var(--series-4);
  --cat-finance:   var(--series-6);
  --cat-neutral:   var(--faint);   /* transport, shopping, utilities, education,
                                      health, news, other */

  /* ---- spacing (4px base) ---- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */

  /* ---- radii ---- */
  --radius-sm:   0.375rem;  /* inputs, small buttons */
  --radius-md:   0.5rem;    /* buttons, selects */
  --radius-lg:   0.75rem;   /* cards, panels, table wrapper, modals */
  --radius-pill: 999px;     /* badges, chips, count bubbles */

  /* ---- type scale (system stack; rem so user zoom works) ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --text-xs:   0.75rem;   /* 12px — badges, chips, calendar chips */
  --text-sm:   0.8125rem; /* 13px — table meta, captions, hints */
  --text-base: 0.875rem;  /* 14px — table cells, controls, body-dense */
  --text-md:   1rem;      /* 16px — body, card labels, modal titles */
  --text-lg:   1.125rem;  /* 18px — panel headings */
  --text-xl:   1.375rem;  /* 22px — summary card values, page heading */
  --text-2xl:  1.75rem;   /* 28px — hero number, landing h2 (mobile) */
  --text-3xl:  2.25rem;   /* 36px — landing hero (desktop) */
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.6;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ---- elevation ---- */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 4px 16px -4px rgba(15, 23, 42, 0.12);
  --shadow-modal: 0 12px 40px -8px rgba(15, 23, 42, 0.28);
  --overlay: rgba(15, 23, 42, 0.45);  /* modal scrim */

  /* ---- focus ring (use on :focus-visible, never remove outlines) ---- */
  --ring-color: var(--accent);
  --ring: 2px solid var(--ring-color);
  --ring-offset: 2px;

  /* ---- motion ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------------------------------------------------------------------------
   Dark theme values — single source of truth is this comment block; the two
   selectors below MUST stay byte-identical. Slate/sky palette carried over
   from the current production dark UI.
   ------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #0f172a;
    --surface:       #1e293b;
    --surface-2:     #16202f;
    --text:          #e2e8f0;
    --muted:         #94a3b8;
    --faint:         #64748b;
    --border:        #334155;
    --border-strong: #475569;

    --accent:        #38bdf8;
    --accent-hover:  #7dd3fc;   /* dark hovers lighten, not darken */
    --accent-soft:   rgba(56, 189, 248, 0.14);
    --on-accent:     #0f172a;

    --success:        #4ade80;
    --success-strong: #86efac;
    --success-soft:   rgba(74, 222, 128, 0.14);
    --danger:         #f87171;
    --danger-strong:  #fca5a5;
    --danger-soft:    rgba(248, 113, 113, 0.14);
    --warning:        #facc15;
    --warning-strong: #fde047;
    --warning-soft:   rgba(250, 204, 21, 0.12);

    /* same 8 hues re-stepped for the dark surface (validated vs #1e293b) */
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --series-other: #64748b;

    --chart-grid: #293548;
    --chart-tick: #94a3b8;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 4px 16px -4px rgba(0, 0, 0, 0.45);
    --shadow-modal: 0 12px 40px -8px rgba(0, 0, 0, 0.6);
    --overlay: rgba(2, 6, 23, 0.7);

    --ring-color: #7dd3fc;
  }
}

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

  --bg:            #0f172a;
  --surface:       #1e293b;
  --surface-2:     #16202f;
  --text:          #e2e8f0;
  --muted:         #94a3b8;
  --faint:         #64748b;
  --border:        #334155;
  --border-strong: #475569;

  --accent:        #38bdf8;
  --accent-hover:  #7dd3fc;
  --accent-soft:   rgba(56, 189, 248, 0.14);
  --on-accent:     #0f172a;

  --success:        #4ade80;
  --success-strong: #86efac;
  --success-soft:   rgba(74, 222, 128, 0.14);
  --danger:         #f87171;
  --danger-strong:  #fca5a5;
  --danger-soft:    rgba(248, 113, 113, 0.14);
  --warning:        #facc15;
  --warning-strong: #fde047;
  --warning-soft:   rgba(250, 204, 21, 0.12);

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --series-other: #64748b;

  --chart-grid: #293548;
  --chart-tick: #94a3b8;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 16px -4px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 12px 40px -8px rgba(0, 0, 0, 0.6);
  --overlay: rgba(2, 6, 23, 0.7);

  --ring-color: #7dd3fc;
}

/* ---------------------------------------------------------------------------
   Motion: collapse transitions/animations for users who ask for less motion.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
  }
}