/* ───────────────────────────────────────────────────────────────
   SEASONS — Design tokens
   Editorial cycle-syncing brand. Brown/mauve gradient ground,
   white editorial cards, condensed display serif, mono-sans body.
   ─────────────────────────────────────────────────────────────── */

/* Fonts
   - Noto Serif Display ExtraCondensed (local .ttf) — display headlines
   - Inter (local variable .ttf) — body, UI, labels (substituting Instrument
     Sans from the figma; Inter was the file the user uploaded)
   - Instrument Serif italic — phase names + emotive emphasis (Google CDN;
     no local file supplied)
   - DM Mono — micro-labels / specimen captions (Google CDN)

   "FONTSPRING DEMO - The Seasons" (custom display used for SEASONS
   wordmark) is licensed and not available on a CDN. We substitute
   Cormorant Garamond at heavy weight for a near-match feel; the
   wordmark is still drawn from the trace PNG in /assets where
   pixel fidelity matters. Flag to user. */
@font-face {
  font-family: 'Noto Serif Display';
  src: url('fonts/NotoSerifDisplay-ExtraCondensed.ttf') format('truetype');
  font-stretch: 62.5%;
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Cormorant+Garamond:wght@500;600;700&family=Italiana&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  /* ── Brand palette ─────────────────────────────────────────── */

  /* Ground (canvas gradient — top→bottom-right) */
  --seasons-ground-1:    #18110E;   /* near-black umber, brand-spec */
  --seasons-ground-2:    #8A7176;   /* warm rose-mauve, brand-spec */
  --seasons-ground-grad: linear-gradient(135deg, #18110E 0%, #8A7176 100%);

  /* Primary brown family (UI surfaces, dark fills, ring) */
  --brown-900:           #18110E;   /* deepest ground */
  --brown-800:           #322C27;   /* near-black body text on cream */
  --brown-700:           #46332C;   /* primary brand brown */
  --brown-600:           #4B3731;   /* button fill, mid-tone */
  --brown-500:           #523E39;   /* sample-card swatch */
  --brown-400:           #8E786B;   /* taupe accent */
  --brown-300:           #967C7F;   /* mauve, ground-2 highlight */
  --brown-200:           #BF8C82;   /* dusty rose */
  --brown-100:           #D7AFB4;   /* most-used fill, soft pink-brown */

  /* Cream / paper (cards, surfaces on dark) */
  --cream-50:            #FFFFFF;
  --cream-100:           #F8F4EC;
  --cream-200:           #F3EDDF;
  --cream-300:           #EDEAE5;   /* editorial off-white */
  --cream-400:           #E4DBCF;   /* soft beige */
  --cream-500:           #D9C7C4;   /* warm pink-cream */

  /* Type colors */
  --ink-1:               #030303;   /* on cream */
  --ink-2:               #322C27;   /* body */
  --ink-3:               #46332C;   /* brand brown text */
  --ink-muted:           rgba(17,17,17,0.55);
  --ink-faint:           rgba(17,17,17,0.30);
  --paper-1:             #FFFFFF;   /* on dark */
  --paper-2:             rgba(255,255,255,0.78);
  --paper-3:             rgba(255,255,255,0.55);
  --paper-faint:         rgba(255,255,255,0.18);

  /* ── Seasonal phase accents ────────────────────────────────── */
  /* Each phase maps a body-cycle phase to a calendar season */
  --winter-deep:         #9B0C32;   /* menstruation accent */
  --winter-soft:         #E6B1B1;
  --winter-tint:         #FFCBCB;

  --spring-deep:         #3C6513;   /* follicular accent */
  --spring-mid:          #9CBC58;
  --spring-soft:         #C5D3A8;
  --spring-tint:         #E7EFD7;

  --summer-deep:         #B69A36;   /* ovulation accent */
  --summer-mid:          #E8A16E;
  --summer-soft:         #F3EDDF;

  --autumn-deep:         #653913;   /* luteal accent */
  --autumn-mid:          #CE6E77;
  --autumn-soft:         #E7DDDA;

  /* Functional */
  --positive:            #9CBC58;
  --warn:                #B69A36;
  --negative:            #9B0C32;
  --info:                #698BC8;

  /* ── Type families ─────────────────────────────────────────── */
  --font-display:    'Noto Serif Display', 'Times New Roman', serif;
  --font-script:     'Noto Serif Display', 'Instrument Serif', 'Times New Roman', serif;
  --font-wordmark:   'Italiana', 'Cormorant Garamond', 'Noto Serif Display', serif; /* substitute for The Seasons */
  --font-body:       'Inter', 'Instrument Sans', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:       'DM Mono', 'SF Mono', ui-monospace, monospace;

  /* ── Type roles (font / weight / size / line-height / tracking) */

  /* Display — condensed editorial. Used for hero & phase titles. */
  --t-display-xxl: 700 clamp(72px, 9vw, 160px)/0.92 var(--font-display);
  --t-display-xl:  700 clamp(56px, 6vw, 104px)/0.95 var(--font-display);
  --t-display-l:   600 clamp(40px, 4.4vw, 72px)/1.00 var(--font-display);
  --t-display-m:   600 clamp(32px, 3.2vw, 48px)/1.05 var(--font-display);
  --t-display-s:   600 28px/1.10 var(--font-display);

  /* Script — italic, used for phase names ("Follicular Phase") */
  --t-script-xl:   400 clamp(56px, 6vw, 96px)/1.00 var(--font-script);
  --t-script-l:    400 44px/1.05 var(--font-script);
  --t-script-m:    400 28px/1.10 var(--font-script);

  /* Body & UI */
  --t-body-l:      400 18px/1.55 var(--font-body);
  --t-body:        400 15px/1.55 var(--font-body);
  --t-body-s:      400 13px/1.50 var(--font-body);
  --t-ui:          500 14px/1.20 var(--font-body);
  --t-ui-s:        500 12px/1.20 var(--font-body);

  /* Eyebrow / micro label — all-caps tracked sans, like SPRING • DAY 10 */
  --t-eyebrow:     500 12px/1.10 var(--font-body);
  --t-eyebrow-l:   500 14px/1.10 var(--font-body);
  --tt-eyebrow:    uppercase;
  --tr-eyebrow:    0.14em;

  /* ── Geometry & elevation ──────────────────────────────────── */
  --radius-pill:   999px;
  --radius-lg:     24px;     /* big cards, modals */
  --radius-md:     16px;     /* cards */
  --radius-sm:     10px;     /* chips, mid */
  --radius-xs:     6px;      /* swatch, tiny */

  --border-hair:   1px solid rgba(17,17,17,0.10);
  --border-cream:  1px solid rgba(255,255,255,0.18);

  /* Shadows are restrained. SEASONS cards rest on the ground
     gradient — elevation is short, warm, soft. No tall drops. */
  --shadow-card:   0 1px 2px rgba(24,17,14,0.06), 0 8px 24px rgba(24,17,14,0.10);
  --shadow-lift:   0 2px 4px rgba(24,17,14,0.08), 0 16px 40px rgba(24,17,14,0.18);
  --shadow-inner:  inset 0 1px 0 rgba(255,255,255,0.5);

  /* Spacing scale (4-px grid) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* Motion */
  --ease-out:      cubic-bezier(.2,.7,.2,1);
  --ease-in-out:   cubic-bezier(.6,.05,.3,.95);
  --t-fast:        160ms;
  --t-base:        260ms;
  --t-slow:        500ms;
}

/* ── Semantic helpers ────────────────────────────────────────── */

.seasons-body {
  background: var(--seasons-ground-grad);
  background-attachment: fixed;
  color: var(--paper-1);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display-xxl  { font: var(--t-display-xxl); letter-spacing: -0.02em; }
.h-display-xl   { font: var(--t-display-xl);  letter-spacing: -0.02em; }
.h-display-l    { font: var(--t-display-l);   letter-spacing: -0.015em; }
.h-display-m    { font: var(--t-display-m);   letter-spacing: -0.01em; }
.h-display-s    { font: var(--t-display-s);   letter-spacing: -0.01em; }
.h-script-xl    { font: var(--t-script-xl); font-style: italic; }
.h-script-l     { font: var(--t-script-l);  font-style: italic; }
.h-script-m     { font: var(--t-script-m);  font-style: italic; }

.t-body-l       { font: var(--t-body-l); }
.t-body         { font: var(--t-body); }
.t-body-s       { font: var(--t-body-s); }
.t-eyebrow      { font: var(--t-eyebrow); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); }
.t-eyebrow-l    { font: var(--t-eyebrow-l); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); }
.t-ui           { font: var(--t-ui); }
.t-mono         { font-family: var(--font-mono); }

/* Wordmark — the SEASONS logotype */
.seasons-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Buttons used widely in the system (kept here for tokens; full
   recipes live in /preview and /ui_kits) */
.btn {
  font: var(--t-ui);
  border: none;
  border-radius: var(--radius-pill);
  padding: 14px 22px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }

.btn-dark  { background: var(--ink-1);  color: var(--cream-100); }
.btn-dark:hover  { background: var(--brown-700); }

.btn-light { background: var(--cream-50); color: var(--ink-1); }
.btn-light:hover { background: var(--cream-300); }

.btn-ghost { background: transparent; color: var(--paper-1); border: 1px solid var(--paper-faint); }
.btn-ghost:hover { background: rgba(255,255,255,0.06); }