/* ============================================================
   REDSCOUT DESIGN SYSTEM — colors_and_type.css
   Foundational + semantic CSS variables for color & type.
   Source spec: uploads/redscout-design.md (inferred from redscout.com)

   FONTS
   - Display: "Founders Grotesk Condensed" (commercial, NOT bundled).
     Substituted with "Saira Condensed" from Google Fonts — closest free
     condensed grotesque. FLAGGED: swap in the licensed face for production.
   - Body / eyebrow: "Inter" (free, documented brand body font).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Saira+Condensed:wght@400;500;600;700&display=swap');

:root {
  /* ---------- COLOR · NEUTRALS (warm editorial sequence) ---------- */
  --paper:        #FFFFFF;   /* default page background */
  --paper-warm:   #F5F2EC;   /* off-white for inverted/warm sections */
  --bone:         #E8E4DB;   /* secondary warm neutral, hairline fills */
  --line:         #1F1F1F;   /* rules and dividers */
  --ink:          #0A0A0A;   /* near-black headlines */
  --graphite:     #3A3A3A;   /* body text */
  --smoke:        #7A7A7A;   /* secondary text, metadata, dormant logos */

  /* ---------- COLOR · ACCENT (selective, signal-only amber) ---------- */
  --amber:        #C9892C;   /* hover, focus, progress, emphasis */
  --amber-soft:   #E2B871;   /* tints, backgrounds for amber moments */

  /* ---------- COLOR · INVERSE SURFACES ---------- */
  --inverse-ink:  #0A0A0A;   /* full-bleed dark sections / footer */
  --inverse-text: #F5F2EC;   /* warm text on inverse-ink */

  /* ---------- SEMANTIC · TEXT ---------- */
  --fg1: var(--ink);         /* primary text / headlines */
  --fg2: var(--graphite);    /* body / secondary */
  --fg3: var(--smoke);       /* muted / captions / metadata */
  --fg-inverse: var(--inverse-text);
  --fg-accent: var(--amber);

  /* ---------- SEMANTIC · SURFACE ---------- */
  --bg1: var(--paper);       /* default page */
  --bg2: var(--paper-warm);  /* warm break section */
  --bg3: var(--bone);        /* tertiary warm fill */
  --bg-inverse: var(--inverse-ink);

  /* ---------- TYPE · FAMILIES ---------- */
  --font-display: 'Saira Condensed', 'Founders Grotesk Condensed', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', 'Söhne', system-ui, sans-serif;
  --font-eyebrow: 'Inter', system-ui, sans-serif;

  /* ---------- TYPE · WEIGHTS ---------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;

  /* ---------- SPACING (4px base) ---------- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 144px;
  --space-5xl: 200px;

  /* ---------- RADII (restrained) ---------- */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---------- ELEVATION (suppressed at rest; warm shadows) ---------- */
  --elev-flat:       none;
  --elev-card-hover: 0 12px 32px rgba(10,10,10,0.08);
  --elev-modal:      0 24px 64px rgba(10,10,10,0.18);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inertia:  cubic-bezier(0.6, 0.01, 0.05, 0.95);
  --dur-instant:   120ms;
  --dur-quick:     240ms;
  --dur-base:      420ms;
  --dur-slow:      720ms;
  --dur-cinematic: 1100ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Display is ALWAYS uppercase; body is ALWAYS sentence case.
   Italics are not part of the system — emphasis is weight + case.
   ============================================================ */

.t-hero {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(56px, 8.5vw, 156px);
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--fg1);
}

.t-display {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(40px, 5.4vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--fg1);
}

.t-section {              /* section heading */
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: clamp(28px, 3.2vw, 56px);
  line-height: 1.02;
  text-transform: uppercase;
  color: var(--fg1);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 22px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--fg1);
}

.t-body-lg {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg2);
}

.t-body {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg2);
}

.t-caption {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg3);
}

.t-eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: var(--w-medium);
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* ---------- ELEMENT MAPPINGS (optional convenience) ---------- */
h1 { font: inherit; }   /* prefer the .t-* classes for intent */

/* Eyebrow (canonical section label). Top rule removed — color section breaks do the job. */
.eyebrow-rule {
  padding-top: 0;
}