/* ============================================================
   MIDWINTER — design tokens
   Dark is the default. Light is "Winter daylight" (see bottom).
   Reserved-colour rule: --cranberry ONLY for over-budget and
   destructive. --holly ONLY for on/under-budget and complete.
   All decorative warmth = --ember. All decorative cool = --frost.
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: url('../../public/fonts/fraunces.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: normal;
  font-display: swap;
  /* tuned so the swap from the fallback serif causes no shift */
  size-adjust: 102%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('../../public/fonts/instrument-sans.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  size-adjust: 100%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  /* ---- ground → raised ---- */
  --night-0: #080D0C;
  --night-1: #0E1614;
  --night-2: #16211E;
  --night-3: #1F2D29;
  --night-4: #2B3B36;

  /* ---- text: warm-tinted, never pure white ---- */
  --text-hi: #F2EDE4;
  --text-mid: #B5B0A6;
  --text-low: #8A867C;

  /* ---- accents ---- */
  --ember: #E8A33D;
  --ember-soft: #F0C078;
  --ember-dim: #6E4C1C;
  --frost: #8FC3C9;
  --frost-dim: #3C585C;
  --holly: #5FB37A;
  --cranberry: #E5544A;
  --paper: #EFE3CC;

  /* ---- section temperature ---- */
  --temp-people: var(--ember);
  --temp-spending: var(--frost);
  --temp-cards: var(--paper);

  /* ---- seasonal drift: 0 (far from Christmas) → 1 (Christmas eve) ----
     Set by JS on :root. Drives glow intensity + warmth. */
  --season: 0;
  --glow-alpha: calc(0.10 + (0.11 * var(--season)));
  --glow: radial-gradient(
    135% 75% at 50% -12%,
    rgba(232, 163, 61, var(--glow-alpha)),
    rgba(232, 163, 61, 0) 62%
  );
  --glow-2: radial-gradient(
    80% 45% at 84% 8%,
    rgba(143, 195, 201, calc(0.05 + (0.03 * var(--season)))),
    transparent 60%
  );

  /* ---- typography ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype',
    'Palatino', 'Georgia', serif;
  --font-ui: 'Instrument Sans', ui-sans-serif, -apple-system,
    'Segoe UI', 'Helvetica Neue', sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem);
  --step-0: clamp(0.93rem, 0.9rem + 0.15vw, 1rem);
  --step-1: clamp(1.1rem, 1.04rem + 0.3vw, 1.27rem);
  --step-2: clamp(1.38rem, 1.26rem + 0.6vw, 1.75rem);
  --step-3: clamp(1.8rem, 1.55rem + 1.2vw, 2.6rem);
  --step-4: clamp(2.6rem, 2.1rem + 2.4vw, 4rem);

  /* ---- surface treatment ---- */
  --edge: 1px solid var(--night-3);
  --etch: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  --lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  /* ---- spacing / rhythm ---- */
  --gutter: 18px;
  --row-min: 56px;
  --tap: 44px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 160ms;
  --mid: 260ms;
  --slow: 380ms;

  --grain-opacity: 0.042;
  --grain-blend: overlay;

  color-scheme: dark;
}

/* ============================================================
   WINTER DAYLIGHT — light theme.
   Not an inversion: warm paper ground, low winter sun.
   ============================================================ */
:root[data-theme='light'] {
  --night-0: #F7F1E6;
  --night-1: #FFFBF3;
  --night-2: #FFFFFF;
  --night-3: #E2D8C6;
  --night-4: #CFC2AB;

  --text-hi: #17211E;
  --text-mid: #4C544F;
  --text-low: #79807A;

  --ember: #A66611;
  --ember-soft: #C98A2C;
  --ember-dim: #E4CFA8;
  --frost: #2E6A72;
  --frost-dim: #B9D2D6;
  --holly: #1F7A45;
  --cranberry: #B8352B;
  --paper: #7A6A4A;

  --glow-alpha: calc(0.06 + (0.06 * var(--season)));
  --glow: radial-gradient(
    135% 75% at 50% -12%,
    rgba(166, 102, 17, var(--glow-alpha)),
    transparent 62%
  );
  --glow-2: radial-gradient(
    80% 45% at 84% 8%,
    rgba(46, 106, 114, 0.05),
    transparent 60%
  );

  --edge: 1px solid var(--night-3);
  --etch: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --lift: 0 1px 2px rgba(60, 45, 20, 0.07), 0 10px 26px -14px rgba(60, 45, 20, 0.22);

  --grain-opacity: 0.05;
  --grain-blend: multiply;

  color-scheme: light;
}