/* ============================================================================
   MyFlowChamp · Daylight Focus — design tokens
   ----------------------------------------------------------------------------
   Drop-in replacement for assets/css/tokens.css
   Light is the default. Dark uses the SAME token names with independently
   chosen values (not inverted), so components never need rewriting.

   Toggle with:  document.documentElement.dataset.theme = 'dark' | 'light'
   Legacy --mfc-* aliases are kept at the bottom so existing CSS keeps working.
   ============================================================================ */

:root {
  /* ---------- surfaces & ink ---------- */
  --bg:          #FAF8F5;   /* page                              */
  --surface:     #FFFFFF;   /* cards, panels, inputs             */
  --surface-2:   #F7F5F1;   /* insets, table header, hover       */
  --surface-3:   #F1EEE8;   /* tracks, segmented background      */
  --ink:         #1E1B16;   /* primary text                      */
  --ink-2:       #6B6558;   /* secondary text                    */
  --ink-3:       #6F6A5E;   /* muted text, placeholders (5.38:1 on white, WCAG AA) */
  --line:        #E6E2DA;   /* borders                           */
  --line-2:      #EDEAE3;   /* subtle dividers                   */

  /* ---------- brand ---------- */
  --pri:         #5B4BD6;
  --pri-hover:   #4A3BC0;
  --pri-ink:     #4A3BC0;   /* brand color used AS text          */
  --pri-soft:    rgba(91,75,214,.09);
  --pri-line:    rgba(91,75,214,.22);
  --pri-grad:    linear-gradient(135deg,#6C5CE7,#5B4BD6);
  --on-pri:      #FFFFFF;

  /* ---------- accent · rewards, streaks, XP ---------- */
  --acc:         #965D0C;
  --acc-soft:    rgba(176,110,15,.10);
  --acc-line:    rgba(176,110,15,.24);
  --acc-grad:    linear-gradient(135deg,#F0B44A,#D9911F);
  --on-acc:      #2B1B02;

  /* ---------- status · RESERVED (never reuse as chart series) ---------- */
  --ok:    #0B7C56;  --ok-soft:   rgba(15,157,110,.10);  --ok-line:   rgba(15,157,110,.24);
  --warn:  #8F540A;  --warn-soft: rgba(180,105,14,.10);  --warn-line: rgba(180,105,14,.24);
  --dang:  #C0392B;  --dang-soft: rgba(192,57,43,.09);   --dang-line: rgba(192,57,43,.22);
  --info:  #1D6FA5;  --info-soft: rgba(29,111,165,.09);  --info-line: rgba(29,111,165,.22);

  /* ---------- data visualization ----------
     Categorical set validated for: lightness band, chroma floor,
     colorblind separation (worst adjacent pair ΔE 9.2), normal-vision
     separation (ΔE 19.1), and >=3:1 contrast against #FFFFFF.
     Assign in fixed order. Never cycle. Never generate a 4th hue.        */
  --series-1: #5B4BD6;   /* Focus    */
  --series-2: #B06E0F;   /* Learning */
  --series-3: #0F9D6E;   /* Health   */

  /* sequential ramp — one hue, light -> dark (heatmaps, magnitude) */
  --seq-0: #F0EDF9;
  --seq-1: #DAD3F4;
  --seq-2: #B9ACEB;
  --seq-3: #8F7CE0;
  --seq-4: #5B4BD6;
  --grid:  #EDEAE3;      /* axis / gridlines — must stay recessive */

  /* ---------- shape ----------
     --r-md is intentionally NOT defined here: it is declared once, below,
     in the legacy-aliases block as an alias of --r-lg (18px). All 22
     current var(--r-md) usages across the codebase have already been
     visually approved at that 18px value during this migration's
     per-file reviews, so that is the value being kept. See the
     legacy-aliases block for the single --r-md declaration. */
  --r-xs: 6px;  --r-sm: 10px;
  --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* ---------- depth ---------- */
  --sh-1: 0 1px 2px rgba(30,26,20,.06);
  --sh-2: 0 2px 4px rgba(30,26,20,.04), 0 8px 20px rgba(30,26,20,.06);
  --sh-3: 0 8px 16px rgba(30,26,20,.06), 0 24px 48px rgba(30,26,20,.10);
  --focus: 0 0 0 3px rgba(91,75,214,.18);

  /* ---------- type ---------- */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --num-w: 600;

  /* ---------- spacing · 4px base ---------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
}

/* ============================================================================
   DARK — independently selected steps, validated against #151A2E.
   This is NOT an inversion of the light values.
   ============================================================================ */
[data-theme="dark"] {
  --bg:        #0E1220;
  --surface:   #151A2E;
  --surface-2: #1B2137;
  --surface-3: #232A44;
  --ink:       #F1F0F7;
  --ink-2:     #A2A8C0;
  --ink-3:     #737A96;
  --line:      #2A3150;
  --line-2:    #232A44;

  --pri:       #8B7CF0;
  --pri-hover: #9C8FF4;
  --pri-ink:   #B9AEF8;
  --pri-soft:  rgba(139,124,240,.16);
  --pri-line:  rgba(139,124,240,.32);
  --pri-grad:  linear-gradient(135deg,#8B7CF0,#6C5CE7);
  --on-pri:    #0E1220;

  --acc:       #E0A93F;
  --acc-soft:  rgba(224,169,63,.15);
  --acc-line:  rgba(224,169,63,.30);
  --acc-grad:  linear-gradient(135deg,#F0C167,#D9911F);
  --on-acc:    #241703;

  --ok:   #34D399;  --ok-soft:   rgba(52,211,153,.15);  --ok-line:   rgba(52,211,153,.30);
  --warn: #E0A93F;  --warn-soft: rgba(224,169,63,.15);  --warn-line: rgba(224,169,63,.30);
  --dang: #F0715C;  --dang-soft: rgba(240,113,92,.14);  --dang-line: rgba(240,113,92,.30);
  --info: #5AB0E0;  --info-soft: rgba(90,176,224,.14);  --info-line: rgba(90,176,224,.28);

  /* dark series — re-stepped, validated (CVD ΔE 9.7, contrast >=3:1) */
  --series-1: #8B7CF0;
  --series-2: #C08A20;
  --series-3: #1BA87B;

  --seq-0: #1C2238;
  --seq-1: #2C3260;
  --seq-2: #443F94;
  --seq-3: #5F53C4;
  --seq-4: #8B7CF0;
  --grid:  #232A44;

  --sh-1: 0 1px 2px rgba(0,0,0,.32);
  --sh-2: 0 2px 4px rgba(0,0,0,.28), 0 8px 20px rgba(0,0,0,.36);
  --sh-3: 0 8px 16px rgba(0,0,0,.34), 0 24px 48px rgba(0,0,0,.46);
  --focus: 0 0 0 3px rgba(139,124,240,.30);
}

/* Respect the OS preference on first load, before any JS runs.
   Remove this block if you want light to always win until the user chooses. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0E1220; --surface:#151A2E; --surface-2:#1B2137; --surface-3:#232A44;
    --ink:#F1F0F7; --ink-2:#A2A8C0; --ink-3:#737A96; --line:#2A3150; --line-2:#232A44;
    --pri:#8B7CF0; --pri-hover:#9C8FF4; --pri-ink:#B9AEF8;
    --pri-soft:rgba(139,124,240,.16); --pri-line:rgba(139,124,240,.32);
    --pri-grad:linear-gradient(135deg,#8B7CF0,#6C5CE7); --on-pri:#0E1220;
    --acc:#E0A93F; --acc-soft:rgba(224,169,63,.15); --acc-line:rgba(224,169,63,.30);
    --acc-grad:linear-gradient(135deg,#F0C167,#D9911F); --on-acc:#241703;
    --ok:#34D399;   --ok-soft:rgba(52,211,153,.15);   --ok-line:rgba(52,211,153,.30);
    --warn:#E0A93F; --warn-soft:rgba(224,169,63,.15); --warn-line:rgba(224,169,63,.30);
    --dang:#F0715C; --dang-soft:rgba(240,113,92,.14); --dang-line:rgba(240,113,92,.30);
    --info:#5AB0E0; --info-soft:rgba(90,176,224,.14); --info-line:rgba(90,176,224,.28);
    --series-1:#8B7CF0; --series-2:#C08A20; --series-3:#1BA87B;
    --seq-0:#1C2238; --seq-1:#2C3260; --seq-2:#443F94; --seq-3:#5F53C4; --seq-4:#8B7CF0;
    --grid:#232A44;
    --sh-1:0 1px 2px rgba(0,0,0,.32);
    --sh-2:0 2px 4px rgba(0,0,0,.28),0 8px 20px rgba(0,0,0,.36);
    --sh-3:0 8px 16px rgba(0,0,0,.34),0 24px 48px rgba(0,0,0,.46);
    --focus:0 0 0 3px rgba(139,124,240,.30);
  }
}

/* ============================================================================
   LEGACY ALIASES
   Your existing stylesheets reference --mfc-*. These keep them alive while you
   migrate file by file. Delete a line once nothing references it any more.
   ============================================================================ */
:root {
  --mfc-bg:        var(--bg);
  --mfc-surface:   var(--surface);
  --mfc-surface2:  var(--surface-2);
  --mfc-text:      var(--ink);
  --mfc-text-mid:  var(--ink-2);
  --mfc-text-dim:  var(--ink-3);
  --mfc-indigo:    var(--pri);
  --mfc-indigo-dim:var(--pri-hover);
  --mfc-purple:    var(--pri);
  --mfc-gold:      var(--acc);
  --mfc-mint:      var(--ok);
  --mfc-red:       var(--dang);
  --mfc-border:    var(--line);

  --font-display:  var(--font);
  --font-body:     var(--font);
  --font-mono:     var(--mono);
  --font-display-serif: 'Fraunces', serif;

  --r-sm-legacy:   var(--r-xs);
  --r-md:          var(--r-lg);
  --shadow-card:   var(--sh-2);
  --shadow-glow:   var(--focus);

  --sp-1: var(--s1); --sp-2: var(--s2); --sp-3: var(--s3); --sp-4: var(--s4);
  --sp-5: var(--s5); --sp-6: var(--s6); --sp-7: var(--s7); --sp-8: var(--s8);

  --z-sidebar: 45;
  --z-topbar:  40;
  --z-modal:   70;
  --z-toast:   140;

  --muted:     var(--mfc-text-mid);
}

/* Sensible page defaults — optional, delete if your reset already handles it. */
html { color-scheme: light; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  transition: background .2s ease, color .2s ease;
}