/* =====================================================================
   SpendSense — Design Tokens
   Calm banking command centre × gamified progress journey
   ===================================================================== */

/* ---------- Webfonts ---------- */
/* Display: Baloo 2 — chunky rounded display (Duolingo-Feather lineage),
   used for hero amounts, page titles, score numbers, the gameful moments.
   Voice: Newsreader italic — the mascot Pip's literary calm-coach register.
   UI/Body: Geist — clean modern grotesque, banking credibility.
   Mono: Geist Mono — tabular amounts in ledger rows. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,500;1,6..72,500;1,6..72,600&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

/* =====================================================================
   1. CORE COLOR TOKENS (raw palette)
   ===================================================================== */
:root {
  /* ---- Plum / Primary (the brand) ---- */
  --plum-50:  #f4f0fb;
  --plum-100: #e6dcf6;
  --plum-200: #cdbaee;
  --plum-300: #ad8fe1;
  --plum-400: #8a66d1;
  --plum-500: #6a45c0;   /* primary */
  --plum-600: #5435a3;
  --plum-700: #422a82;
  --plum-800: #2f1f5e;
  --plum-900: #1d1340;
  --plum-950: #0f0822;

  /* ---- Parchment / Warm neutrals (light mode surfaces) ---- */
  --parchment-50:  #fbf8f2;   /* page bg */
  --parchment-100: #f4eee2;   /* raised surface */
  --parchment-200: #ebe3d0;   /* card / hairline */
  --parchment-300: #d9cdb4;
  --parchment-400: #b8a886;
  --parchment-500: #8d7d5b;

  /* ---- Slate (dark mode + ink) ---- */
  --slate-50:  #f3f4f7;
  --slate-100: #dfe2ea;
  --slate-200: #b8bdcc;
  --slate-300: #8088a0;
  --slate-400: #545d77;
  --slate-500: #3a4259;
  --slate-600: #2a3045;
  --slate-700: #1e2235;
  --slate-800: #161927;
  --slate-900: #0e101b;

  /* ---- Amber / Gold (rewards, coins, streaks) ---- */
  --amber-100: #fbecc7;
  --amber-300: #f3c969;
  --amber-500: #e0a82e;   /* coin gold */
  --amber-600: #b8851e;
  --amber-700: #8a6212;

  /* ---- Coral (overdue / warning) ---- */
  --coral-100: #fde0d6;
  --coral-300: #f4a48a;
  --coral-500: #e8654a;
  --coral-600: #c64a30;
  --coral-700: #98361f;

  /* ---- Moss (success / paid — restrained, used sparingly) ---- */
  --moss-100: #d8ebd5;
  --moss-300: #8cc28a;
  --moss-500: #4f9d56;
  --moss-600: #3a7d44;
  --moss-700: #28572f;

  /* ---- Sky (information / due-soon, non-urgent) ---- */
  --sky-100: #d6e6f4;
  --sky-300: #8eb6dc;
  --sky-500: #4c84b8;
}

/* =====================================================================
   2. SEMANTIC TOKENS — light mode (default)
   ===================================================================== */
:root {
  /* Surfaces — warm parchment, intentionally NOT pure white */
  --bg-page:        var(--parchment-50);
  --bg-raised:      #ffffff;
  --bg-sunken:      var(--parchment-100);
  --bg-inset:       var(--parchment-200);

  /* Foreground / ink */
  --fg-1:           var(--slate-800);   /* primary text */
  --fg-2:           var(--slate-500);   /* secondary text */
  --fg-3:           var(--slate-400);   /* tertiary / meta */
  --fg-4:           var(--slate-300);   /* disabled / placeholder */
  --fg-on-primary:  var(--parchment-50);
  --fg-on-amber:    var(--slate-900);

  /* Brand */
  --brand:           var(--plum-500);
  --brand-strong:    var(--plum-700);
  --brand-soft:      var(--plum-100);
  --brand-ink:       var(--plum-900);

  /* Semantic — gameful */
  --reward:          var(--amber-500);
  --reward-soft:     var(--amber-100);
  --reward-ink:      var(--amber-700);

  --paid:            var(--moss-500);
  --paid-soft:       var(--moss-100);
  --paid-ink:        var(--moss-700);

  --overdue:         var(--coral-500);
  --overdue-soft:    var(--coral-100);
  --overdue-ink:     var(--coral-700);

  --due-soon:        var(--sky-500);
  --due-soon-soft:   var(--sky-100);

  /* Borders — visible hairlines, banking credibility */
  --border-1:        var(--parchment-200);   /* default */
  --border-2:        var(--parchment-300);   /* stronger */
  --border-ink:      var(--slate-800);       /* checkpoint reached */
  --border-dashed:   var(--parchment-300);   /* timeline future */

  /* Shadows — restrained, ledger-flat, never glow */
  --shadow-xs:       0 1px 0 rgba(30, 34, 53, 0.04);
  --shadow-sm:       0 1px 2px rgba(30, 34, 53, 0.06), 0 1px 0 rgba(30, 34, 53, 0.04);
  --shadow-md:       0 4px 12px -4px rgba(30, 34, 53, 0.10), 0 1px 2px rgba(30, 34, 53, 0.05);
  --shadow-lg:       0 12px 32px -8px rgba(30, 34, 53, 0.16), 0 2px 6px rgba(30, 34, 53, 0.06);
  --shadow-inset:    inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(30, 34, 53, 0.05);
  /* "Stamp" — used on checkpoint badges, gives a slight pressed-into-paper look */
  --shadow-stamp:    inset 0 0 0 1px rgba(30, 34, 53, 0.08), 0 1px 0 rgba(30, 34, 53, 0.06);
}

/* =====================================================================
   3. SEMANTIC TOKENS — dark mode (deep slate, restrained)
   ===================================================================== */
:root[data-theme="dark"] {
  --bg-page:        var(--slate-900);
  --bg-raised:      var(--slate-800);
  --bg-sunken:      #0a0c15;
  --bg-inset:       var(--slate-700);

  --fg-1:           #ece8df;             /* warm off-white, not pure */
  --fg-2:           var(--slate-200);
  --fg-3:           var(--slate-300);
  --fg-4:           var(--slate-400);
  --fg-on-primary:  #ece8df;

  --brand:          var(--plum-400);
  --brand-strong:   var(--plum-300);
  --brand-soft:     rgba(138, 102, 209, 0.16);
  --brand-ink:      var(--plum-100);

  --reward-soft:    rgba(224, 168, 46, 0.18);
  --paid-soft:      rgba(79, 157, 86, 0.18);
  --overdue-soft:   rgba(232, 101, 74, 0.18);
  --due-soon-soft:  rgba(76, 132, 184, 0.18);

  --border-1:       rgba(255, 255, 255, 0.06);
  --border-2:       rgba(255, 255, 255, 0.12);
  --border-ink:     #ece8df;
  --border-dashed:  rgba(255, 255, 255, 0.16);

  --shadow-xs:      0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:      0 4px 12px -4px rgba(0, 0, 0, 0.6);
  --shadow-lg:      0 16px 36px -10px rgba(0, 0, 0, 0.7);
  --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-stamp:   inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* =====================================================================
   4. TYPE TOKENS
   ===================================================================== */
:root {
  --font-display: 'Baloo 2', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --font-voice:   'Newsreader', 'Iowan Old Style', Georgia, serif;     /* mascot voice + literary moments */
  --font-sans:    'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Scale — modest, banking-credible. Mobile-first. */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  /* Line heights */
  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  /* Tracking */
  --track-tight:   -0.02em;
  --track-snug:    -0.01em;
  --track-normal:  0;
  --track-label:   0.06em;     /* eyebrow / section labels */
  --track-stamp:   0.14em;     /* uppercase stamps on checkpoints */
}

/* =====================================================================
   5. SHAPE / SPACE / MOTION TOKENS
   ===================================================================== */
:root {
  /* Radii — soft but never bubbly. Cards 14, pills full. */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Border widths — hairline + emphatic ledger rule */
  --border-w-1: 1px;
  --border-w-2: 1.5px;
  --border-w-3: 2px;

  /* Spacing — 4px base. Mobile pads ~20–24px. */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;

  /* Density — single knob for compact/cozy/comfortable */
  --density-row-h:    56px;
  --density-row-pad:  16px;

  /* Motion — calm. No bounces on financial values; gentle on reward/streak. */
  --ease-standard: cubic-bezier(0.32, 0.08, 0.24, 1);
  --ease-emphatic: cubic-bezier(0.2, 0.7, 0.15, 1.02);   /* a tiny overshoot for streak/coin */
  --dur-fast:      120ms;
  --dur-base:      220ms;
  --dur-slow:      420ms;
  --dur-celebrate: 680ms;
}

/* =====================================================================
   6. SEMANTIC TYPE RECIPES
   (Apply as classes OR via @extend-style usage in components.)
   ===================================================================== */
.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
.t-voice {
  font-family: var(--font-voice);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  color: var(--brand-strong);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.t-meta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.t-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-2);
}
.t-stamp {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
}
.t-amount {
  font-family: var(--font-mono);
  font-weight: 500;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.t-amount-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

/* ---------- Base ---------- */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}