/* ============================================================
   THEO DESIGN SYSTEM — Color & Type Tokens
   Source: Theo Brand Standards v1.0 (Figma)
   ============================================================ */

/* ---------- FONTS ----------
   Primary UI/display: Season Sans (foundry, locally hosted from /fonts).
   Editorial / wordmark: Season Serif (locally hosted).
   Hybrid family: Season Mix (sans/serif blend — optional, see Season Mix var).
   Mono: Geist Mono — open source, served via Google Fonts.

   All Season files are .otf; mapped to weights below. Italics are real
   files (not synthesized).
*/
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap");

@font-face { font-family: "Season Sans"; src: url("fonts/SeasonSans-Light.otf") format("opentype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("fonts/SeasonSans-LightItalic.otf") format("opentype");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("fonts/SeasonSans-Regular.otf") format("opentype");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("fonts/SeasonSans-RegularItalic.otf") format("opentype");font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("fonts/SeasonSans-Medium.otf") format("opentype");       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("fonts/SeasonSans-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("fonts/SeasonSans-SemiBold.otf") format("opentype");     font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("fonts/SeasonSans-SemiBoldItalic.otf") format("opentype");font-weight:600; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("fonts/SeasonSans-Bold.otf") format("opentype");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("fonts/SeasonSans-BoldItalic.otf") format("opentype");   font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("fonts/SeasonSans-Heavy.otf") format("opentype");        font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Sans"; src: url("fonts/SeasonSans-HeavyItalic.otf") format("opentype");  font-weight: 900; font-style: italic; font-display: swap; }

@font-face { font-family: "Season Serif"; src: url("fonts/SeasonSerif-Light.otf") format("opentype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Serif"; src: url("fonts/SeasonSerif-LightItalic.otf") format("opentype");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Serif"; src: url("fonts/SeasonSerif-Regular.otf") format("opentype");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Serif"; src: url("fonts/SeasonSerif-RegularItalic.otf") format("opentype");font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Serif"; src: url("fonts/SeasonSerif-Medium.otf") format("opentype");       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Serif"; src: url("fonts/SeasonSerif-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Serif"; src: url("fonts/SeasonSerif-SemiBold.otf") format("opentype");     font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Serif"; src: url("fonts/SeasonSerif-SemiBoldItalic.otf") format("opentype");font-weight:600;font-style: italic; font-display: swap; }
@font-face { font-family: "Season Serif"; src: url("fonts/SeasonSerif-Bold.otf") format("opentype");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Serif"; src: url("fonts/SeasonSerif-BoldItalic.otf") format("opentype");   font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Serif"; src: url("fonts/SeasonSerif-Heavy.otf") format("opentype");        font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Serif"; src: url("fonts/SeasonSerif-HeavyItalic.otf") format("opentype");  font-weight: 900; font-style: italic; font-display: swap; }

@font-face { font-family: "Season Mix"; src: url("fonts/SeasonMix-Light.otf") format("opentype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("fonts/SeasonMix-LightItalic.otf") format("opentype");  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("fonts/SeasonMix-Regular.otf") format("opentype");      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("fonts/SeasonMix-RegularItalic.otf") format("opentype");font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("fonts/SeasonMix-Medium.otf") format("opentype");       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("fonts/SeasonMix-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("fonts/SeasonMix-SemiBold.otf") format("opentype");     font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("fonts/SeasonMix-SemiBoldItalic.otf") format("opentype");font-weight:600; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("fonts/SeasonMix-Bold.otf") format("opentype");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("fonts/SeasonMix-BoldItalic.otf") format("opentype");   font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("fonts/SeasonMix-Heavy.otf") format("opentype");        font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Season Mix"; src: url("fonts/SeasonMix-HeavyItalic.otf") format("opentype");  font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---------- BRAND CORE ---------- */
  --theo-onyx:        #01161B;  /* Rich Dark Teal — body text, near-black */
  --theo-gunmetal:    #002B31;  /* Green Gunmetal  — primary brand surface */
  --theo-teal:        #007F8E;  /* Teal           — primary accent       */
  --theo-light-cyan:  #D3FAFF;  /* Light Cyan     — soft surface          */
  --theo-electric:    #86F1FF;  /* Electric Blue  — punchy accent         */

  /* ---------- NEUTRALS ---------- */
  --theo-white:       #FFFFFF;
  --theo-black:       #000000;
  --theo-cadet:       #829DA1;  /* Cadet Grey */
  --theo-slate:       #60787C;  /* Slate Grey */
  --theo-mute:        #BBBBBB;  /* Muted page chrome / labels */
  --theo-near-black:  #00060D;  /* Cover backdrop */

  /* ---------- ACCENTS (sparing use) ---------- */
  --theo-rose:        #C41D54;  /* Rose Red */
  --theo-french-pink: #F6467F;  /* French Pink */
  --theo-deep-violet: #250E69;  /* Deep Violet */
  --theo-tropical:    #918FFF;  /* Tropical Indigo */

  /* ---------- SEMANTIC: FOREGROUND ---------- */
  --fg-1: var(--theo-onyx);     /* primary text on light */
  --fg-2: var(--theo-slate);    /* secondary text */
  --fg-3: var(--theo-cadet);    /* tertiary / captions */
  --fg-mute: var(--theo-mute);  /* chrome labels (page numbers, captions) */
  --fg-on-dark: var(--theo-white);
  --fg-on-dark-2: var(--theo-cadet);

  /* ---------- SEMANTIC: BACKGROUND ---------- */
  --bg-1: var(--theo-white);
  --bg-2: var(--theo-light-cyan);   /* soft surface */
  --bg-dark-1: var(--theo-gunmetal);
  --bg-dark-2: var(--theo-onyx);
  --bg-cover:  var(--theo-near-black);

  /* ---------- SEMANTIC: ACCENT ---------- */
  --accent: var(--theo-teal);
  --accent-hover: #006C78;
  --accent-soft: var(--theo-light-cyan);
  --accent-punch: var(--theo-electric);

  /* ---------- BORDERS / DIVIDERS ---------- */
  --border-1: rgba(187,187,187,0.5);
  --border-2: rgba(1,22,27,0.10);
  --border-dark: rgba(255,255,255,0.10);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: "Season Sans", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Season Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-mix: "Season Mix", "Season Sans", ui-sans-serif, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  --font-display: var(--font-sans); /* Season Sans Medium is the display voice */

  /* ---------- TYPE SCALE (matches Figma proportions, scaled to 1× viewport) ----------
     Original Figma tokens at 3840×2160. We scale ÷2 for 1920 work, but tokens stay at
     practical screen sizes. */
  --fs-display: 96px;   /* hero / cover */
  --fs-h1: 64px;
  --fs-h2: 48px;
  --fs-h3: 36px;
  --fs-h4: 28px;
  --fs-body-lg: 22px;
  --fs-body: 18px;
  --fs-body-sm: 16px;
  --fs-caption: 14px;
  --fs-mono-label: 13px;

  /* line-heights — Figma is consistently 100% on display, ~140% on body */
  --lh-tight: 1.0;
  --lh-snug:  1.1;
  --lh-body:  1.4;
  --lh-loose: 1.6;

  /* tracking — display in Figma is -0.010em across the board */
  --tr-tight: -0.01em;
  --tr-mono:  -0.01em;
  --tr-wide:  0.04em;
  --tr-caps:  0.08em;

  /* ---------- SPACING (8pt grid) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- RADII ----------
     The brand uses a strong split: pills (100px / fully rounded) for capsules,
     none/2px for hairline strokes. Cards / large surfaces are typically
     rectangular. */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ----------
     Theo's visual language is flat. Elevation is communicated with
     hairline strokes and color contrast more than with shadow. Use
     these sparingly. */
  --shadow-1: 0 1px 2px rgba(1,22,27,0.06);
  --shadow-2: 0 4px 16px rgba(1,22,27,0.08);
  --shadow-3: 0 12px 32px rgba(1,22,27,0.12);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

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

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}
p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.caption { font-size: var(--fs-caption); color: var(--fg-2); }

/* Geist Mono usage: page numbers, capsule labels, code, data, ticker copy */
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
}
.mono-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-label);
  text-transform: none;
  color: var(--fg-mute);
  letter-spacing: var(--tr-mono);
}

/* The brand's signature element: a mono-set capsule used for status/tag */
.capsule {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--theo-mute);
  color: var(--theo-white);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-label);
  letter-spacing: var(--tr-mono);
}
.capsule--teal { background: var(--theo-teal); color: var(--theo-white); }
.capsule--onyx { background: var(--theo-onyx); color: var(--theo-white); }

/* Hairline divider — Figma uses a 6px-tall low-opacity rule */
.rule {
  border: 0;
  height: 1px;
  background: var(--border-1);
}