/* Saved & Calm · design tokens. Light + dark, system default with manual override. */

:root {
  /* Brand */
  --savings-green: #2F7A57;
  --forest: #1E4A38;
  --gold: #E8B949;
  --paper: #F6F3EB;
  --mint: #E3F1E8;
  --coral: #E9876B;

  /* Fill palette: "Meadow" (default). Phase 3 swaps these per challenge theme. */
  --fill-1: #BFE3C9;
  --fill-2: #F7D88B;
  --fill-3: #F5C2B3;
  --fill-4: #BFD8F2;
  --fill-5: #D9C9EE;
  --fill-6: #F3E3A6;

  /* Surfaces & ink */
  --bg: var(--paper);
  --surface: #FFFDF8;
  --surface-2: #EFEADC;
  --surface-sunk: #EAE4D4;
  --ink: #1D2B24;
  --ink-soft: #56645C;
  --ink-faint: #8A948D;
  --line: #E2DACA;
  --line-strong: #CFC5B0;
  --accent: var(--savings-green);
  --accent-strong: var(--forest);
  --accent-ink: #FFFFFF;
  --accent-wash: var(--mint);
  --gold-wash: #FBEFC8;
  --gold-ink: #6B4F0E;
  --coral-wash: #FBE4DB;
  --coral-ink: #8A3E28;
  --focus: #2F7A57;
  --grain-opacity: .35;

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Lexend', 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
  --soft: 'SOFT' 100, 'WONK' 0;

  --step--1: .8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --step-4: clamp(2.5rem, 7vw, 3.5rem);

  /* Shape & depth */
  --r-xs: 8px;
  --r-sm: 14px;
  --r: 22px;
  --r-lg: 30px;
  --r-pill: 999px;
  --shadow-1: 0 1px 0 rgba(30, 74, 56, .04), 0 2px 6px -2px rgba(30, 74, 56, .08);
  --shadow-2: 0 1px 0 rgba(30, 74, 56, .05), 0 14px 32px -16px rgba(30, 74, 56, .28);
  --ring: 0 0 0 3px var(--bg), 0 0 0 6px var(--focus);

  /* Space */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;

  --tabbar-h: 68px;
  --sidebar-w: 256px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111C17;
    --surface: #182821;
    --surface-2: #1F3229;
    --surface-sunk: #0D1612;
    --ink: #EDF3EE;
    --ink-soft: #A9BAB0;
    --ink-faint: #74877C;
    --line: #2A3F35;
    --line-strong: #3A5346;
    --accent: #6CC89A;
    --accent-strong: #9BDDB9;
    --accent-ink: #0F2219;
    --accent-wash: #1D3A2D;
    --gold-wash: #3A3018;
    --gold-ink: #F3D586;
    --coral-wash: #3B2620;
    --coral-ink: #F4B6A2;
    --focus: #8FD8B2;
    --grain-opacity: .18;
    --fill-1: #4F8F68;
    --fill-2: #B8933A;
    --fill-3: #B9705C;
    --fill-4: #5A7FA6;
    --fill-5: #7E6AA3;
    --fill-6: #A69443;
    --shadow-1: 0 1px 0 rgba(0, 0, 0, .2), 0 2px 6px -2px rgba(0, 0, 0, .4);
    --shadow-2: 0 1px 0 rgba(0, 0, 0, .2), 0 18px 36px -18px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #111C17;
  --surface: #182821;
  --surface-2: #1F3229;
  --surface-sunk: #0D1612;
  --ink: #EDF3EE;
  --ink-soft: #A9BAB0;
  --ink-faint: #74877C;
  --line: #2A3F35;
  --line-strong: #3A5346;
  --accent: #6CC89A;
  --accent-strong: #9BDDB9;
  --accent-ink: #0F2219;
  --accent-wash: #1D3A2D;
  --gold-wash: #3A3018;
  --gold-ink: #F3D586;
  --coral-wash: #3B2620;
  --coral-ink: #F4B6A2;
  --focus: #8FD8B2;
  --grain-opacity: .18;
  --fill-1: #4F8F68;
  --fill-2: #B8933A;
  --fill-3: #B9705C;
  --fill-4: #5A7FA6;
  --fill-5: #7E6AA3;
  --fill-6: #A69443;
  --shadow-1: 0 1px 0 rgba(0, 0, 0, .2), 0 2px 6px -2px rgba(0, 0, 0, .4);
  --shadow-2: 0 1px 0 rgba(0, 0, 0, .2), 0 18px 36px -18px rgba(0, 0, 0, .7);
  color-scheme: dark;
}