/* ============================================================
   Scalon — Colors & Type
   Source-of-truth CSS variables for all surfaces.
   Derived from uploads/tokens.css + UX Design Specification.
   ============================================================ */

/* Brand fonts — local TTFs (variable) */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLOR ---------------------------------- */
  /* Vermillon profond — THE Scalon accent. Used for the chiffre-choc,
     transparency-card accent bars, section labels, primary buttons.
     Never use at small body sizes (fails AAA). */
  --accent:          #D64C31;
  --accent-light:    #F2E0DC;   /* subtle fill for transparency/action zones */
  --accent-dark:     #A83A25;   /* hover / emphasis */

  /* ---------- FOREGROUND / BACKGROUND ---------------------- */
  /* Warm stone neutrals — NOT cool gray. This is half the identity. */
  --fg1:             #1C1917;   /* primary text — warm near-black */
  --fg2:             #57534E;   /* secondary text (stone-500) */
  --fg3:             #A8A29E;   /* tertiary / muted (stone-400) */
  --bg1:             #FFFFFF;   /* primary surface */
  --bg2:             #FAFAF9;   /* subtle surface (stone-50) */
  --bg3:             #F5F5F4;   /* page canvas (stone-100) */
  --border:          #E7E5E4;   /* hairlines (stone-200) */
  --border-strong:   #D6D3D1;   /* emphasized borders (stone-300) */
  --ink:             #1C1917;   /* dark surface — nav, footer */

  /* ---------- SEMANTIC (dashboard / status) ---------------- */
  --success:         #16A34A;
  --warning:         #D97706;
  --danger:          #DC2626;
  --info:            #6B7280;

  /* ---------- TYPOGRAPHY FAMILIES -------------------------- */
  /* Space Grotesk = geometric, distinctive — headings + shock numbers */
  --font-heading:    'Space Grotesk', system-ui, sans-serif;
  /* Source Serif 4  = editorial, ultra-readable — body copy (Wirecutter vibe) */
  --font-body:       'Source Serif 4', Georgia, serif;
  /* JetBrains Mono = factual, humble — transparency blocks, metadata */
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE (Major Third, 1.25) --------------- */
  --text-xs:         0.75rem;    /* 12px — disclaimers, meta */
  --text-sm:         0.875rem;   /* 14px — labels, captions */
  --text-base:       1rem;       /* 16px — body */
  --text-lg:         1.25rem;    /* 20px — subtitle, lead */
  --text-xl:         1.563rem;   /* 25px — section titles */
  --text-2xl:        1.953rem;   /* 31px — page titles */
  --text-3xl:        2.441rem;   /* 39px — CHIFFRE-CHOC */

  /* Chiffre-choc variants — the Scalon signature number */
  --text-shock-hero:    2.441rem;   /* 39px — landing hero */
  --text-shock-section: 2.25rem;    /* 36px — PDF section opener */
  --text-shock-card:    1.563rem;   /* 25px — CitySorted score */

  /* Line heights */
  --leading-heading: 1.2;
  --leading-body:    1.6;
  --leading-mono:    1.4;

  /* Letter spacing (uppercase eyebrows) */
  --tracking-eyebrow: 0.06em;

  /* ---------- SPACING (4px grid) --------------------------- */
  --space-xs:        4px;
  --space-sm:        8px;
  --space-md:        16px;
  --space-lg:        24px;
  --space-xl:        32px;
  --space-2xl:       48px;
  --space-3xl:       64px;

  /* ---------- RADIUS --------------------------------------- */
  --radius-sm:       4px;
  --radius-md:       8px;
  --radius-pill:     999px;

  /* ---------- SHADOWS -------------------------------------- */
  --shadow-sm:       0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:       0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg:       0 8px 30px rgba(0,0,0,0.08);

  /* ---------- LAYOUT --------------------------------------- */
  --width-reading:   680px;   /* landing, PDF column */
  --width-email:     600px;   /* HTML email */
  --width-wide:      1200px;  /* CitySorted grids, dashboard */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply body{} + use the classes/elements below for consistency.
   ============================================================ */

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg1);
  background: var(--bg1);
  margin: 0;
}

/* Headings — Space Grotesk, tight */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--fg1);
  line-height: var(--leading-heading);
  margin: 0 0 var(--space-md);
  font-weight: 700;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); font-weight: 600; }
h4 { font-size: var(--text-base); font-weight: 600; }

/* Paragraphs */
p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

/* Links — inline vermillon underline */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--accent-dark); }

/* Small, meta, captions */
small, .meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg2);
  line-height: var(--leading-mono);
}

/* Eyebrow — the tiny uppercase label above a title */
.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
}

/* The signature: chiffre-choc */
.shock {
  font-family: var(--font-heading);
  font-size: var(--text-shock-hero);
  font-weight: 700;
  color: var(--accent);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Transparency block — JetBrains Mono, stone-bg, accent left-border */
.transparency {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg2);
  line-height: var(--leading-body);
  background: var(--bg2);
  border-left: 3px solid var(--accent);
  padding: var(--space-md);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Action zone — vermillon-light card containing ice-breaker / CTA */
.action-zone {
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

/* Code / mono inline */
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg2);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

/* Horizontal rule */
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-xl) 0;
}

/* ============================================================
   PRINT / PDF (WeasyPrint)
   Mobile-first lisibility principles applied to A4.
   ============================================================ */
@media print {
  body { font-size: 12pt; line-height: 1.5; background: white; }
  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; }
  h3 { font-size: 14pt; }
  a { color: var(--fg1); text-decoration: none; }
  .shock { font-size: 28pt; }
}