/* ============================================================================
   ook.monster — Foundations: Color + Type
   "Heraldic Rally Team" — warm neutrals, forest green structure, rosso energy.
   Load fonts via Google Fonts (CDN). Self-host into /fonts for production.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Pirata+One&family=Space+Grotesk:wght@300..700&family=Martian+Mono:wght@400..700&display=swap');

:root {
  /* ---- WARM NEUTRALS (paper → ink) ---------------------------------------- */
  --paper:    #F6F1E9; /* primary background — warm bone-white            */
  --bone:     #EFE8DC; /* raised surface / card on paper                  */
  --linen:    #E5DCCC; /* sunken surface / inset                          */
  --ash:      #C9C0AF; /* hairline borders, dividers                      */
  --stone:    #968E7D; /* subtle fg, captions, disabled                   */
  --clay:     #6B6353; /* muted fg, secondary text                        */
  --bark:     #443E34; /* strong muted / dark surface text                */
  --espresso: #2A251E; /* dark surface background                         */
  --ink:      #19140E; /* primary foreground — warm near-black            */

  /* ---- FOREST GREEN (structure / brand) ----------------------------------- */
  --pine:       #11271A; /* deepest green — dark surfaces, pressed         */
  --forest:     #1E4D31; /* PRIMARY brand green                            */
  --moss:       #2F6B43; /* hover / lighter brand                          */
  --leaf:       #4C8A5B; /* bright accent, use sparingly                   */
  --green-tint: #E1E8DD; /* soft green-washed background                   */

  /* ---- ROSSO (Ferrari red — harsh energy accent) -------------------------- */
  --rosso:        #CE1B12; /* ACCENT — calls to action, hazard, energy     */
  --rosso-bright: #E63027; /* hover / bright                               */
  --rosso-deep:   #9E110B; /* pressed / deep                               */
  --red-tint:     #F3DBD4; /* soft red-washed background                   */

  /* ---- BRASS / OR (heraldic detail — minor tertiary) ---------------------- */
  --brass:      #B5893C; /* gilt line work, crest detailing               */
  --brass-deep: #8A6628; /* pressed brass                                 */

  /* ===== SEMANTIC ========================================================== */
  --bg:            var(--paper);
  --bg-surface:    var(--bone);
  --bg-inset:      var(--linen);
  --bg-dark:       var(--espresso);
  --bg-darkest:    var(--ink);

  --fg:            var(--ink);
  --fg-muted:      var(--clay);
  --fg-subtle:     var(--stone);
  --fg-on-dark:    var(--paper);
  --fg-on-dark-muted: #B9B0A0;

  --border:        var(--ash);          /* hairline */
  --border-strong: var(--ink);          /* bold heraldic rule */

  --primary:       var(--forest);
  --primary-hover: var(--moss);
  --primary-press: var(--pine);
  --on-primary:    var(--paper);

  --accent:        var(--rosso);
  --accent-hover:  var(--rosso-bright);
  --accent-press:  var(--rosso-deep);
  --on-accent:     var(--paper);

  --success:       var(--forest);
  --danger:        var(--rosso);
  --focus-ring:    var(--rosso);

  /* ===== TYPE FAMILIES ===================================================== */
  --font-display: "Pirata One", "Times New Roman", serif;   /* gothic blackletter — heraldic display */
  --font-sans:    "Space Grotesk", system-ui, -apple-system, sans-serif; /* technical grotesque */
  --font-mono:    "Martian Mono", ui-monospace, "SFMono-Regular", monospace; /* rally timing / data */

  /* ===== TYPE SCALE (1.250 major-third-ish, tuned) ======================== */
  --text-2xs: 0.6875rem; /* 11px — micro labels, timing */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-base:1rem;      /* 16px */
  --text-md:  1.125rem;  /* 18px */
  --text-lg:  1.375rem;  /* 22px */
  --text-xl:  1.75rem;   /* 28px */
  --text-2xl: 2.25rem;   /* 36px */
  --text-3xl: 3rem;      /* 48px */
  --text-4xl: 4rem;      /* 64px */
  --text-5xl: 5.5rem;    /* 88px */
  --text-6xl: 7.5rem;    /* 120px display */

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-normal:1.5;
  --leading-loose: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-label:  0.14em;  /* mono labels, eyebrows */
  --tracking-mega:   0.22em;  /* stage codes */

  /* ===== SPACING (4px base) =============================================== */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10:128px; --space-11:192px;

  /* ===== RADII (sharp, architectural brand) =============================== */
  --radius-0:  0px;    /* signature: hard edge */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px; /* tags, timing chips */

  /* ===== BORDERS ========================================================== */
  --hairline: 1px solid var(--border);
  --rule:     2px solid var(--border-strong);
  --rule-thick: 4px solid var(--border-strong);

  /* ===== SHADOWS (warm, low — print/flat brand leans on borders) ========== */
  --shadow-xs: 0 1px 2px rgba(25, 20, 14, 0.07);
  --shadow-sm: 0 2px 6px rgba(25, 20, 14, 0.09);
  --shadow-md: 0 8px 20px rgba(25, 20, 14, 0.12);
  --shadow-lg: 0 18px 44px rgba(25, 20, 14, 0.18);
  /* offset "block" shadow — rally decal / heraldic stamp feel */
  --shadow-block: 6px 6px 0 var(--ink);
  --shadow-block-rosso: 6px 6px 0 var(--rosso);

  /* ===== MOTION =========================================================== */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================================
   SEMANTIC TYPE ROLES — apply directly or copy values.
   ========================================================================== */
.display-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-6xl);
  line-height: 1.02;
  letter-spacing: var(--tracking-normal);
  color: var(--fg);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: 1.04;
  letter-spacing: var(--tracking-normal);
  color: var(--fg);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg);
}
.h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
}
.stage-code { /* SS01, STAGE 04 — rally indexing */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: var(--fg-muted);
}
.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--fg-muted);
}
.body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
}
.small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}
.mono-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-muted);
}
.blazon { /* heraldic / editorial display note */
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg);
}