/* =========================================================================
   Discourse Watch — Colors & Type
   Aesthetic: US Forest Service signage, Smokey Bear, Fire Danger gauges.
   Warm wood, enamel-paint primaries, chunky condensed display type.
   ========================================================================= */

/* ---- FONTS ---------------------------------------------------------------
   Brand family: "National Forest" — hand-lettered carved-sign family.
   Based on inspection:
   - NationalForest-ExtraBold.otf (900): the chunky signage face — THIS is the
     display / H1 / H2 / gauge-plate / wordmark face.
   - NationalForest.otf (700): a hand-script brush face — secondary accent,
     used for pull quotes, mascot speech, signature moments. Never for H1/H2.
   - NationalForest Print (Thin/Regular/Bold): a CAPS-ONLY drawn signage face.
     Used for all ALL-CAPS labels: eyebrows, buttons, signage arc, H3/H4.
     NOT usable for body copy (no lowercase glyphs).
   - NationalForest-Extras.otf: pictograph dingbats (shields, tents, campers,
     bears, hikers). Load directly in components that use glyphs.
   Body copy: "DM Sans" — flagged substitute. National Forest Print has no
     lowercase glyphs, so body prose needs a real lowercase humanist sans.
     When the brand provides a companion text face, swap it in here.
   Mono: "JetBrains Mono" — flagged substitute (no brand mono provided).
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "National Forest";
  src: url("/fonts/NationalForest-ExtraBold.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "National Forest Script";
  src: url("/fonts/NationalForest.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "National Forest Print";
  src: url("/fonts/NationalForest-PrintThin.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "National Forest Print";
  src: url("/fonts/NationalForest-PrintRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "National Forest Print";
  src: url("/fonts/NationalForest-PrintBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "National Forest Extras";
  src: url("/fonts/NationalForest-Extras.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Body + Mono */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Special+Elite&display=swap');

:root {
  /* ---- COLOR PALETTE ---------------------------------------------------- */

  /* Wood / paper — the "sign" backdrop */
  --wood-50:  #fbefd6;   /* pale pine, paper */
  --wood-100: #f4dfae;   /* light grain */
  --wood-200: #e9c488;   /* mid grain */
  --wood-300: #d4a05a;   /* knot */
  --wood-400: #b27a3a;   /* dark grain */
  --wood-500: #8a5626;   /* bark edge */
  --wood-600: #5f3a18;   /* burnt edge */
  --wood-700: #3a2410;   /* deep shadow */

  /* Ink (signage text — oxidized reds + blacks, not pure black) */
  --ink:        #1a1410;
  --ink-soft:   #3a2a1c;
  --ink-mute:   #6d5a47;
  --ink-faint:  #a89176;

  /* Sign background (the orange "VERY HIGH" plate) */
  --sign-orange:       #e8852a;
  --sign-orange-hover: #d97419;
  --sign-red:          #a8201c;    /* "TODAY'S DISCOURSE DANGER" text */

  /* ---- DANGER LEVELS (the gauge) -------------------------------------- */
  /* These ARE the brand. Mapped to Forest Service Red Flag convention. */
  --danger-low:       #3f9b4c;   /* green   — calm */
  --danger-moderate:  #3ca7d4;   /* blue    — normal chatter */
  --danger-high:      #f6d33c;   /* yellow  — heated */
  --danger-very-high: #e8852a;   /* orange  — dogpile territory */
  --danger-extreme:   #b8241f;   /* red     — touch grass */

  /* Slightly darker variants for outlines/shadows on the gauge */
  --danger-low-ink:       #245a2c;
  --danger-moderate-ink:  #1f6b8c;
  --danger-high-ink:      #a8841e;
  --danger-very-high-ink: #8a4a12;
  --danger-extreme-ink:   #6b120f;
  --danger-extreme-hover: #8a1b17;

  /* ---- SEMANTIC ROLES --------------------------------------------------- */
  --bg:           var(--wood-50);
  --bg-panel:     #fffaed;           /* the enamel plate */
  --bg-sunk:      var(--wood-100);
  --bg-wood:      var(--wood-200);   /* the carved slab */

  --fg1:          var(--ink);
  --fg2:          var(--ink-soft);
  --fg3:          var(--ink-mute);
  --fg-faint:     var(--ink-faint);
  --fg-on-danger: #fffaed;           /* white-on-enamel, never pure white */

  --border:       var(--wood-400);
  --border-soft:  var(--wood-200);
  --border-ink:   var(--ink-soft);

  --accent:       var(--sign-orange);
  --accent-ink:   var(--sign-red);

  /* Shadow — hand-painted sign casts a soft warm shadow onto wood */
  --shadow-sign:  0 2px 0 rgba(58,36,16,.35), 0 6px 14px rgba(58,36,16,.18);
  --shadow-inset: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(58,36,16,.25);
  --shadow-carve: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 3px rgba(58,36,16,.2);
  --shadow-hover: 0 4px 8px rgba(58,36,16,.15);

  /* Frosted bar — top bar and sticky elements */
  --bg-frost: rgba(251, 239, 214, 0.92);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-mid:  300ms;

  /* Radii — signs are rectangular with lightly rounded corners, gauges are circular */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-plate: 6px;     /* the "VERY HIGH" banner */
  --radius-pill: 999px;

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- TYPE TOKENS ----------------------------------------------------- */
  /* Display: National Forest ExtraBold — chunky carved-signage face. Ships
     only as weight 900 (the 700-weight slot is the script variant below). */
  --font-display:   "National Forest", "Rockwell", Georgia, serif;
  /* Script accent: National Forest (hand-brush). For pull quotes, mascot
     speech, handwritten moments. Never for H1/H2. */
  --font-script:    "National Forest Script", "Brush Script MT", cursive;
  /* Signage: National Forest Print — CAPS-ONLY drawn signage. Used for
     ALL-CAPS labels only (eyebrows, buttons, tabs, arc labels, H3/H4). */
  --font-signage:   "National Forest Print", "Rockwell", Georgia, serif;
  /* Body: Archivo — utilitarian sans with slightly condensed proportions.
     Pairs with the chunky National Forest display without competing. */
  --font-body:      "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Mono: Smith Corona typewriter — timestamps, cluster IDs, handles */
  --font-mono:      "Special Elite", "Courier Prime", "Courier New", ui-monospace, Menlo, monospace;
  /* Extras: pictographs — load directly where glyphs are used */
  --font-extras:    "National Forest Extras", sans-serif;

  /* Weights */
  --fw-thin:     300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:900;

  /* ---- TYPE SCALE (rem-based, 1rem = 16px) ------------------------------ */
  /* 6-step scale: ~1.33 ratio (perfect fourth) between heading steps,
     consistent body/small/caption sizes. App UI = fixed rem, no fluid.   */
  --text-caption:   0.75rem;   /* 12px — timestamps, cluster IDs, privacy */
  --text-small:     0.875rem;  /* 14px — log descriptions, secondary body  */
  --text-body:      1rem;      /* 16px — base prose, blurbs, explainers    */
  --text-lead:      1.125rem;  /* 18px — neighbourhood blurb, emphasis     */
  --text-h3:        1.375rem;  /* 22px — section headings (signage face)   */
  --text-h2:        2.25rem;   /* 36px — greeting, page headings           */
  --text-h1:        3.5rem;    /* 56px — landing wordmark                  */
  --text-numeral:   2rem;      /* 32px — cluster card temperature          */

  /* Signage face sizing — tighter scale for CAPS-ONLY labels */
  --text-chip:      0.6875rem; /* 11px — chip labels                      */
  --text-eyebrow:   0.8125rem; /* 13px — eyebrows, section labels          */
  --text-button:    0.875rem;  /* 14px — buttons, CTA text                 */

  /* Letter-spacing: two tiers for signage face */
  --ls-tight:  0.06em;   /* interactive: buttons, chips, input labels      */
  --ls-wide:   0.12em;   /* passive: eyebrows, section labels, subtitles   */

  /* Line-height */
  --lh-tight:    1.05;   /* display / h1                                   */
  --lh-heading:  1.15;   /* h2 / h3                                        */
  --lh-body:     1.55;   /* body prose                                     */
  --lh-loose:    1.65;   /* small text, captions                           */
}

/* ---- ELEMENT DEFAULTS ---------------------------------------------------- */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--lh-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-h1);
  line-height: var(--lh-tight);
  letter-spacing: 0.005em;
  color: var(--fg1);
  margin: 0 0 var(--sp-4);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-h2);
  line-height: var(--lh-heading);
  margin: 0 0 var(--sp-3);
}
h3, .h3 {
  font-family: var(--font-signage);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}
h4, .h4 {
  font-family: var(--font-signage);
  font-weight: 700;
  font-size: var(--text-body);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg2);
  margin: 0 0 var(--sp-2);
}

/* Signage arc labels — the "LOW / MODERATE / HIGH" around the gauge */
.signage-label {
  font-family: var(--font-signage);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

/* The big enamel plate text — "VERY HIGH" uses the heaviest weight */
.plate-text {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--fg-on-danger);
  text-shadow:
    2px 2px 0 rgba(0,0,0,.35),
    -1px -1px 0 rgba(255,255,255,.15);
  letter-spacing: 0.02em;
}

/* Hand-brush accent — pull quotes, mascot speech, signature phrases. */
.script {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--accent-ink);
}
p, .p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--fg2);
  text-wrap: pretty;
  margin: 0 0 var(--sp-4);
}
.p-lead {
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--fg1);
}
.p-small {
  font-size: var(--text-small);
  line-height: var(--lh-loose);
  color: var(--fg3);
}

/* Label / eyebrow / KPI */
.eyebrow {
  font-family: var(--font-signage);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Mono — timestamps, numbers, post IDs */
code, .mono {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--fg2);
}

/* Data numerals — tabular figures for alignment */
.numeral {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--fg1);
}