/* ============================================================
   The Début · Colors & Type tokens
   Single source of truth for colors, type, radii, shadows,
   spacing. Import this anywhere before writing component CSS.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Vetrino";
  src: url("fonts/Vetrino.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Forum";
  src: url("fonts/Forum-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Foglihten";
  src: url("fonts/FoglihtenNo06.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Corsa Grotesk";
  src: url("fonts/CorsaGrotesk-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nexa";
  src: url("fonts/Nexa-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Core palette (warm cream) ---------- */
  --bg:           #F9F7EF;   /* main canvas — warm cream */
  --card:         #F2EBD9;   /* cards, inputs, sticky elements */
  --card-2:       #EFE7D1;   /* one step deeper card */
  --dark:         #2D2416;   /* warm dark — hero/CTA/pricing. NOT black. */
  --dark-2:       #3A3022;   /* warm dark, one step lighter */

  --olive:        #5C5843;   /* PRIMARY brand — buttons, CTA, progress */
  --olive-ink:    #4A4735;   /* pressed / hovered olive */
  --teal:         #1E7280;   /* links, quiet accents */
  --brown:        #7B4D3A;   /* warm accent */
  --gold:         #C9A96E;   /* decoration on dark bg */
  --light-green:  #E6EECD;   /* badges, quiet chips */

  /* ---------- Text ---------- */
  --text:         #111111;   /* headlines on cream */
  --text-soft:    #3A3228;   /* body text */
  --text-muted:   #7A6E5E;   /* labels, metadata */
  --text-on-dark: #F2EBD9;   /* body on #2D2416 */
  --text-on-dark-muted: #B7AC94;

  /* ---------- Scoring (0–100) ---------- */
  --score-nosignal-fg: #B5341B;  --score-nosignal-bg: #FBE9E5; /* ≤20 */
  --score-weak-fg:     #C97A2A;  --score-weak-bg:     #FBF0E0; /* ≤40 */
  --score-visible-fg:  #9E8A2E;  --score-visible-bg:  #F7F3DC; /* ≤60 */
  --score-strong-fg:   #3A7A4A;  --score-strong-bg:   #E3F2E8; /* ≤80 */
  --score-iconic-fg:   #1E6680;  --score-iconic-bg:   #DFF0F5; /* >80 */

  /* ---------- Type families ---------- */
  --font-display: "Vetrino", "Forum", "Playfair Display", serif; /* hero lowercase */
  --font-serif:   "Forum", "Playfair Display", Georgia, serif;   /* titles, caps */
  --font-body:    "Corsa Grotesk", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-label:   "Nexa", "Corsa Grotesk", ui-sans-serif, sans-serif; /* labels, italics */
  --font-ornament:"Foglihten", "Forum", serif;                   /* rare: decorative caps */

  /* ---------- Type scale (editorial, not dashboard) ---------- */
  --fs-hero:      clamp(56px, 9vw, 112px);  /* Vetrino lowercase, -0.02em */
  --fs-display:   clamp(40px, 6vw, 72px);   /* Forum caps */
  --fs-h1:        48px;
  --fs-h2:        36px;
  --fs-h3:        24px;
  --fs-title:     20px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-small:     14px;
  --fs-label:     12px;     /* Nexa italic, +0.08em tracked */

  --lh-tight:     1.02;
  --lh-snug:      1.18;
  --lh-normal:    1.45;
  --lh-loose:     1.65;

  /* ---------- Radius ---------- */
  --radius-pill:   1000px;  /* buttons, badges */
  --radius-card:   20px;    /* cards */
  --radius-field:  14px;    /* inputs, tabs */
  --radius-xs:     8px;

  /* ---------- Shadow (always warm #2D2416) ---------- */
  --shadow-xs: 0 1px 2px rgba(45,36,22,0.05);
  --shadow-sm: 0 2px 12px rgba(45,36,22,0.07);
  --shadow-md: 0 8px 28px rgba(45,36,22,0.09);
  --shadow-lg: 0 20px 60px rgba(45,36,22,0.14);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.35);

  /* ---------- Border ---------- */
  --border-hair:  1px solid rgba(45,36,22,0.08);
  --border-soft:  1px solid rgba(45,36,22,0.12);
  --border-on-dark: 1px solid rgba(242,235,217,0.10);

  /* ---------- Spacing (8-pt scale, editorial generosity) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10:128px; --s-11:160px;

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --ease-soft:  cubic-bezier(.4,.0,.2,1);
  --dur-fast:   140ms;
  --dur-med:    260ms;
  --dur-slow:   480ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Raw HTML elements already look right after this.
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hero-display {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--text);
  text-transform: lowercase;
  font-weight: 400;
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  color: var(--text);
  font-weight: 400;
  letter-spacing: 0.01em;
}
h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--text);
  font-weight: 400;
}
h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--text);
  font-weight: 400;
}

.eyebrow, .label-caps {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-style: italic;
}

p { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--text-soft); }
p.lede { font-size: var(--fs-body-lg); color: var(--text-soft); }
small, .small { font-size: var(--fs-small); color: var(--text-muted); }

a { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(30,114,128,0.25); transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--olive-ink); border-bottom-color: rgba(92,88,67,0.45); }

/* Section-heading in caps, à la "ЧТО ТЫ ПОЛУЧИШЬ?" */
.display-caps {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--text);
  text-transform: uppercase;
  font-weight: 400;
}