/* =====================================================================
   SCOUT ASHES — Colors & Type
   ---------------------------------------------------------------------
   A single source of truth for the brand's low-level visual foundations.

   The brand ships in TWO moods that share one bone structure:
     • EMBER   (default)  — firelight against night. Dark, ceremonial,
                            intimate. The fire-circle after dark.
     • CANVAS  (.theme-canvas) — a well-worn field guide. Warm paper,
                            forest & bark, ember as an accent. Daylight,
                            heritage, rugged.

   Use the SEMANTIC tokens (--bg, --fg, --primary, …) in product work.
   The raw palette below exists so the semantic layer has something to
   point at — reach for raw tokens only for fine bespoke tuning.
   ===================================================================== */

/* Hanken Grotesk (body) + Space Mono (data) stay on Google Fonts.
   Noto Serif (display) is the uploaded BRAND serif, self-hosted below. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Space+Mono:wght@400;700&display=swap');

/* ---- BRAND FONT: Noto Serif (uploaded, self-hosted) -------------------
   Variable fonts are the workhorse — they cover the full 100–900 range
   (incl. the 400/500/600 mid-weights the static cuts don't ship). The
   static instances are registered against the same family at their exact
   weights. The Condensed cut is a separate family for poster headlines. */
@font-face {
  font-family: 'Noto Serif';
  src: url('fonts/NotoSerif-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Serif';
  src: url('fonts/NotoSerif-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900; font-stretch: 75% 100%; font-style: italic; font-display: swap;
}
/* Static instances (exact weights — same family, deterministic at 700/900) */
@font-face { font-family: 'Noto Serif'; src: url('fonts/NotoSerif-Bold.ttf') format('truetype');       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('fonts/NotoSerif-BoldItalic.ttf') format('truetype');  font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('fonts/NotoSerif-Black.ttf') format('truetype');       font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('fonts/NotoSerif-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

/* ---- BRAND FONT: Noto Serif Condensed (poster / hero display) -------- */
@font-face { font-family: 'Noto Serif Condensed'; src: url('fonts/NotoSerif_Condensed-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Serif Condensed'; src: url('fonts/NotoSerif_Condensed-Regular.ttf') format('truetype');    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Serif Condensed'; src: url('fonts/NotoSerif_Condensed-Bold.ttf') format('truetype');       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Serif Condensed'; src: url('fonts/NotoSerif_Condensed-Black.ttf') format('truetype');      font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ---- RAW PALETTE ------------------------------------------------ */

  /* Ink — warm near-blacks & charcoals (the night, the charcoal, soot) */
  --ink-950: #120E0B;
  --ink-900: #181310;
  --ink-850: #1F1813;
  --ink-800: #271F18;
  --ink-750: #30261E;
  --ink-700: #3B2F25;
  --ink-600: #4D3E31;

  /* Ember — the living fire. Primary brand color. */
  --ember-200: #FAD7AE;
  --ember-300: #F6B576;
  --ember-400: #F0934A;
  --ember-500: #E8702C;   /* PRIMARY ember */
  --ember-600: #CD5820;
  --ember-700: #A6431A;
  --ember-800: #7C3214;

  /* Coal — the deep red heart of the embers (rare, hot accent) */
  --coal-500: #C5421F;
  --coal-600: #A8331A;
  --coal-700: #842614;

  /* Forest — pine & needle (secondary / scouting green) */
  --forest-400: #5C8164;
  --forest-500: #436B4F;
  --forest-600: #35543D;
  --forest-700: #294330;
  --forest-800: #1E3324;

  /* Bark — warm browns (heritage structure, leather, wood) */
  --bark-400: #9A744F;
  --bark-500: #7C5938;
  --bark-600: #62452B;
  --bark-700: #4A3320;

  /* Tan / Khaki — canvas, uniform, neckerchief field */
  --tan-200: #E3D2AE;
  --tan-300: #D2BB8E;
  --tan-400: #C2A570;

  /* Ash & Canvas — warm neutrals from cream to smoke */
  --canvas-50: #FBF6EC;
  --canvas-100: #F4ECDC;
  --canvas-200: #EADFC9;
  --canvas-300: #DCCDB0;
  --ash-100: #F4ECE1;   /* warm cream — text on dark */
  --ash-200: #E0D5C6;
  --ash-300: #C6B9A8;
  --ash-400: #A99C8B;
  --ash-500: #897D6D;
  --ash-600: #6A5F52;

  /* Status (kept warm so they sit in the family) */
  --positive-500: #5B8C4E;
  --positive-600: #466E3C;
  --caution-500: #E0A030;
  --caution-600: #C0831C;
  --critical-500: #C5421F;
  --critical-600: #A33218;
  --info-500: #4E7C82;
  --info-600: #3C636A;

  /* =================================================================
     TYPOGRAPHY
     ================================================================= */
  --font-display: 'Noto Serif', Georgia, 'Times New Roman', serif;  /* BRAND serif (uploaded) */
  --font-display-condensed: 'Noto Serif Condensed', 'Noto Serif', Georgia, serif; /* poster headlines */
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'SFMono-Regular', ui-monospace, monospace; /* field-log data */

  /* Type scale — 1.5rem base, ~1.2 ratio, tuned by hand */
  --text-xs: 0.75rem;     /* 12px — micro labels, mono meta */
  --text-sm: 0.875rem;    /* 14px — captions, helper text */
  --text-base: 1rem;      /* 16px — body */
  --text-md: 1.125rem;    /* 18px — lead body */
  --text-lg: 1.375rem;    /* 22px — h5 / large label */
  --text-xl: 1.75rem;     /* 28px — h4 */
  --text-2xl: 2.25rem;    /* 36px — h3 */
  --text-3xl: 3rem;       /* 48px — h2 */
  --text-4xl: 4rem;       /* 64px — h1 */
  --text-5xl: 5.5rem;     /* 88px — display / hero */

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

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.14em;   /* eyebrows / mono labels, ALL CAPS */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* =================================================================
     SPACING — 4px base unit
     ================================================================= */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */

  /* =================================================================
     RADII — gently rounded, never pill-soft except for tags & avatars
     ================================================================= */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* =================================================================
     SEMANTIC TOKENS — EMBER (default / dark)
     ================================================================= */
  --bg: var(--ink-950);
  --bg-gradient: radial-gradient(120% 90% at 50% 8%, #2A1C12 0%, var(--ink-950) 55%);
  --surface: var(--ink-850);
  --surface-raised: var(--ink-800);
  --surface-sunken: var(--ink-900);
  --border: rgba(244, 236, 225, 0.10);
  --border-strong: rgba(244, 236, 225, 0.18);

  --fg: var(--ash-100);
  --fg-muted: var(--ash-300);
  --fg-subtle: var(--ash-500);
  --fg-onPrimary: #2A150A;

  --primary: var(--ember-500);
  --primary-hover: var(--ember-400);
  --primary-press: var(--ember-600);
  --primary-soft: rgba(232, 112, 44, 0.14);

  --secondary: var(--forest-400);
  --secondary-soft: rgba(92, 129, 100, 0.16);

  --accent: var(--ember-300);
  --ring: rgba(240, 147, 74, 0.55);

  --success: var(--positive-500);
  --warning: var(--caution-500);
  --danger: var(--critical-500);
  --info: var(--info-500);

  /* The signature firelight glow — used sparingly behind hot elements */
  --glow-ember: 0 0 0 1px rgba(232,112,44,0.25), 0 8px 40px -8px rgba(232,112,44,0.55);

  /* Translucent chrome surfaces (sticky bars, sheets) — theme-aware */
  --bar-translucent: rgba(31,24,19,0.82);
  --sheet-translucent: rgba(31,24,19,0.92);

  /* Shadows — warm-tinted, soft. On dark, shadows are subtle; glow does more. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-md: 0 6px 18px -6px rgba(0,0,0,0.55);
  --shadow-lg: 0 22px 48px -16px rgba(0,0,0,0.65);

  color-scheme: dark;
}

/* =====================================================================
   THEME: CANVAS & BARK (light / heritage)
   Apply .theme-canvas on a wrapping element (or <body>).
   ===================================================================== */
.theme-canvas {
  --bg: var(--canvas-100);
  --bg-gradient: radial-gradient(130% 100% at 50% -10%, var(--canvas-50) 0%, var(--canvas-100) 60%, var(--canvas-200) 100%);
  --surface: var(--canvas-50);
  --surface-raised: #FFFFFF;
  --surface-sunken: var(--canvas-200);
  --border: rgba(74, 51, 32, 0.14);
  --border-strong: rgba(74, 51, 32, 0.26);

  --fg: var(--ink-900);
  --fg-muted: var(--bark-600);
  --fg-subtle: var(--ash-600);
  --fg-onPrimary: var(--canvas-50);

  --primary: var(--forest-600);
  --primary-hover: var(--forest-500);
  --primary-press: var(--forest-700);
  --primary-soft: rgba(53, 84, 61, 0.10);

  --secondary: var(--ember-500);
  --secondary-soft: rgba(232, 112, 44, 0.12);

  --accent: var(--ember-600);
  --ring: rgba(53, 84, 61, 0.45);

  --glow-ember: 0 0 0 1px rgba(232,112,44,0.22), 0 8px 30px -10px rgba(232,112,44,0.40);

  --bar-translucent: rgba(251,246,236,0.85);
  --sheet-translucent: rgba(255,255,255,0.92);

  --shadow-sm: 0 1px 2px rgba(74,51,32,0.10);
  --shadow-md: 0 8px 22px -10px rgba(74,51,32,0.22);
  --shadow-lg: 0 26px 54px -20px rgba(74,51,32,0.30);

  color-scheme: light;
}

/* =====================================================================
   SEMANTIC TYPE CLASSES
   Drop-in classes that pair the right family, size, weight & rhythm.
   ===================================================================== */
.t-display {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.t-h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold);     line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.t-h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug);  letter-spacing: var(--tracking-tight); }
.t-h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.t-h4 { font-family: var(--font-display); font-size: var(--text-xl);  font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.t-h5 { font-family: var(--font-body);    font-size: var(--text-lg);  font-weight: var(--weight-semibold); line-height: var(--leading-snug); }

.t-lead { font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-regular); line-height: var(--leading-relaxed); color: var(--fg-muted); }
.t-body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); }
.t-small { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-muted); }

/* Eyebrow / kicker — the brand's signature label. Mono, caps, wide-tracked.
   Used above headings and on data ("FIRE No. 0001 · 51.5°N"). */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
}
.t-mono { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: var(--tracking-normal); }
.t-data { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-subtle); }

/* Useful base reset hooks (opt-in) */
.sa-root {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}