/* ================================================================
   Solo — Design Tokens (Cream redesign, v2.0.0)
   ================================================================
   Warm, calm, competent. Cream + coral + sage.
   Inter Tight UI · Instrument Serif italic for money · JetBrains Mono captions.
   Old token names kept as aliases so legacy CSS keeps working.
   ================================================================ */

:root {
  /* ── Surface ─────────────────────────────────────────────── */
  --bg:              #F4ECE0;
  --bg-deep:         #EBE1D1;
  --surface:         #FFFFFF;
  --surface-2:       #FAF4EA;

  /* Aliases for legacy classes */
  --bg-elevated:     var(--surface);
  --bg-card:         var(--surface);
  --bg-card-hover:   var(--surface-2);
  --bg-input:        var(--surface-2);
  --bg-overlay:      rgba(31, 27, 22, 0.32);
  --bg-sheet:        var(--surface);

  /* ── Borders ─────────────────────────────────────────────── */
  --line:            rgba(31, 27, 22, 0.08);
  --border:          var(--line);
  --border-light:    rgba(31, 27, 22, 0.14);

  /* ── Text (warm ink) ─────────────────────────────────────── */
  --ink:             #1F1B16;
  --ink-2:           #5A5348;
  --ink-3:           #8A8275;

  /* Aliases */
  --text:            var(--ink);
  --text-dim:        var(--ink-2);
  --text-muted:      var(--ink-3);
  --text-inverse:    #FFFFFF;

  /* ── Accent (coral) ─────────────────────────────────────── */
  --accent:          #E07856;
  --accent-ink:      #8B3B24;
  --accent-soft:     #F5D9CE;
  --primary-soft:    var(--accent-soft);
  --primary-glow:    rgba(224, 120, 86, 0.18);

  /* ── Buttons: PRIMARY = INK (new design choice) ─────────── */
  --primary:         var(--ink);
  --primary-hover:   #2A251E;
  --cta:             var(--accent);     /* coral pill on RecCard */
  --cta-hover:       #C9614A;
  --cta-soft:        var(--accent-soft);
  --cta-text:        #FFFFFF;
  --border-focus:    var(--accent);

  /* ── Status ─────────────────────────────────────────────── */
  --good:            #7FA68C;
  --good-ink:        #3F6B52;
  --good-soft:       #DBE8DF;
  --green:           var(--good);
  --green-dark:      var(--good-ink);
  --green-soft:      var(--good-soft);

  --warn:            #D9A441;
  --warn-soft:       rgba(217, 164, 65, 0.14);
  --orange:          var(--warn);
  --orange-soft:     var(--warn-soft);
  --orange-glow:     rgba(217, 164, 65, 0.18);

  --red:             #C9524A;
  --red-soft:        rgba(201, 82, 74, 0.10);

  --purple:          #8B6DB0;
  --purple-soft:     rgba(139, 109, 176, 0.08);

  /* ── Card glows (re-tuned to new palette) ───────────────── */
  --glow-switch:     0 0 0 1.5px rgba(224, 120, 86, 0.55), 0 8px 24px rgba(224, 120, 86, 0.12);
  --glow-progress:   0 0 0 1.5px rgba(127, 166, 140, 0.45), 0 2px 8px  rgba(127, 166, 140, 0.08);
  --glow-optimised:  0 0 0 1.5px rgba(127, 166, 140, 0.45), 0 2px 12px rgba(127, 166, 140, 0.08);
  --glow-issue:      0 0 0 1.5px rgba(201, 82,  74, 0.45), 0 2px 12px rgba(201, 82,  74, 0.08);
  --glow-neutral:    0 0 0 1px var(--line);
  --shadow-rec:      0 8px 40px rgba(224, 120, 86, 0.16);

  /* ── Typography ─────────────────────────────────────────── */
  --font:        'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-serif:  'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:     0.66rem;     /* ≈10.5 — uppercase labels, mono */
  --text-sm:     0.81rem;     /* ≈13   — meta */
  --text-base:   0.91rem;     /* ≈14.5 — body */
  --text-md:     1rem;        /* 16    — input fields */
  --text-lg:     1.13rem;     /* ≈18 */
  --text-xl:     1.31rem;     /* ≈21 */
  --text-2xl:    1.63rem;     /* ≈26   — section hero */
  --text-3xl:    1.88rem;     /* 30    — Home hero headline */
  --text-hero:   3rem;        /* 48 */

  --leading-tight:   1.1;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* ── Spacing (4-px scale) ───────────────────────────────── */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;  --space-4:  16px;
  --space-5:  20px;  --space-6:  24px;  --space-8:  32px;  --space-10: 40px;
  --space-12: 48px;  --space-16: 64px;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm:   14px;
  --radius:      18px;       /* dense rows */
  --radius-lg:   22px;       /* canonical card */
  --radius-xl:   28px;       /* hero, sheets, tab bar */
  --radius-full: 999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-card: 0 1px 2px rgba(31, 27, 22, 0.04), 0 8px 24px rgba(31, 27, 22, 0.03);
  --shadow-tab:  0 8px 24px rgba(31, 27, 22, 0.06), 0 1px 2px rgba(31, 27, 22, 0.04);
  --shadow:      var(--shadow-card);
  --shadow-lg:   0 8px 24px rgba(31, 27, 22, 0.10);
  --shadow-xl:   0 12px 40px rgba(31, 27, 22, 0.14);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-tap:    cubic-bezier(0, 0, 0.2, 1);
  --ease-loop:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sheet:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    var(--ease-tap);
  --ease:        var(--ease-tap);          /* alias for old code */
  --ease-spring: var(--ease-sheet);
  --duration-fast: 120ms;
  --duration:      260ms;
  --duration-slow: 360ms;

  /* ── Layout ─────────────────────────────────────────────── */
  --tab-bar-h:     60px;
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
  --content-max-w: 448px;
  --content-pad:   20px;
}