/* ============================================================
   REYNARD MARKETING — Foundations: Color + Type
   "Old-world cunning meets modern machine."
   Warm engraving (paper/sepia) UNDER · cool blue glass OVER.
   ============================================================ */

/* ---- Fonts -------------------------------------------------
   Display/headers: GC Gatuzo (commercial, Onyx Studio) — NOT
   bundled. SUBSTITUTED with Space Grotesk (geometric, futuristic)
   until licensed files are supplied. Swap @font-face in fonts/.
   Body: Hanken Grotesk — clean, high-legibility humanist sans.
   Numerals/tracking data: Space Mono — the "machine" voice.
------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* === FONT FAMILIES === */
  --font-display: 'Space Grotesk', 'GC Gatuzo', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ============================================================
     COLOR — WARM (engraving / paper / sepia ink)
     Bare engraving is ATMOSPHERE ONLY. Text never sits here.
     ============================================================ */
  --paper-100: #ECE0C6;   /* lightest aged paper */
  --paper-200: #E2D2B0;   /* default paper field */
  --paper-300: #D6C49E;   /* deeper paper / edges */
  --paper-400: #C4AE84;   /* worn paper shadow */
  --sepia-900: #2A1D12;   /* darkest engraving ink */
  --sepia-700: #3B2A1C;   /* engraving ink line */
  --sepia-500: #5A4632;   /* soft sepia */
  --sepia-300: #8A7355;   /* faded ink */

  /* ============================================================
     COLOR — COOL (Prussian / ink / steel — the glass)
     Blue with character. Never default SaaS cyan.
     ============================================================ */
  --ink-950: #07182B;     /* deepest Prussian ink */
  --ink-900: #0B2742;     /* primary deep blue */
  --ink-800: #0E3354;     /* Prussian */
  --ink-700: #134A74;     /* steel-Prussian */
  --steel-600: #2E4A66;   /* cool steel-slate */
  --steel-500: #45627E;   /* mid steel */
  --steel-400: #6E89A6;   /* light steel */
  --frost-200: #C9D9E8;   /* frosted edge */
  --frost-100: #EAF1F8;   /* lightest frost */

  /* ============================================================
     COLOR — ACCENT (the fox — warm amber, CTAs ONLY)
     One sharp warm note reserved so it pops against the blue.
     ============================================================ */
  --amber-600: #B5651A;   /* pressed */
  --amber-500: #E0892F;   /* primary CTA / fox */
  --amber-400: #EFA24C;   /* hover / glow */
  --amber-200: #F6CE97;   /* tint */
  --amber-100: #FBE8CE;   /* faint wash */

  /* ============================================================
     SIGNATURE TREATMENT — blue glass over engraving
     Frost + subtle solid tint keeps copy WCAG-AA legible.
     ============================================================ */
  /* Dark glass (white text) — the default reynard panel */
  --glass-dark-bg: rgba(11, 30, 51, 0.60);
  --glass-dark-bg-strong: rgba(9, 24, 42, 0.78); /* behind body copy in sun */
  --glass-dark-border: rgba(160, 190, 220, 0.30);
  --glass-dark-hi: rgba(255, 255, 255, 0.22);    /* top inner highlight */
  --glass-blur: 22px;
  --glass-blur-heavy: 34px;

  /* Light glass (ink text) — frosted pale panel */
  --glass-light-bg: rgba(231, 240, 249, 0.66);
  --glass-light-bg-strong: rgba(238, 244, 251, 0.86);
  --glass-light-border: rgba(255, 255, 255, 0.60);
  --glass-light-hi: rgba(255, 255, 255, 0.75);

  /* ============================================================
     TEXT COLORS (always on glass)
     ============================================================ */
  --text-on-dark: #F2F6FB;        /* AA on dark glass */
  --text-on-dark-soft: #C2D2E3;   /* secondary on dark glass */
  --text-on-dark-mute: #8FA6BD;   /* tertiary / labels */
  --text-on-light: #0C2440;       /* AA on light glass */
  --text-on-light-soft: #3A536C;  /* secondary on light glass */
  --text-on-amber: #2A1605;       /* dark ink for amber buttons */

  /* ============================================================
     RADII
     ============================================================ */
  --r-xs: 6px;
  --r-sm: 10px;     /* buttons, chips */
  --r-md: 16px;     /* small glass panels */
  --r-lg: 22px;     /* hero glass panels */
  --r-xl: 30px;     /* feature plates */
  --r-pill: 999px;

  /* ============================================================
     SHADOWS / ELEVATION — cool, deep (glass floats)
     ============================================================ */
  --sh-glass-sm: 0 8px 22px -10px rgba(6, 16, 30, 0.45);
  --sh-glass-md: 0 18px 44px -14px rgba(6, 16, 30, 0.55);
  --sh-glass-lg: 0 34px 80px -20px rgba(5, 14, 28, 0.62);
  --sh-amber: 0 12px 30px -10px rgba(176, 101, 26, 0.55);
  --inset-glass-hi: inset 0 1px 0 0 var(--glass-dark-hi);
  --inset-light-hi: inset 0 1px 0 0 var(--glass-light-hi);

  /* ============================================================
     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;
  --sp-9: 96px; --sp-10: 128px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   ATMOSPHERE — bare engraving background (NO text on this)
   Layer: warm paper photo + faint sepia cross-hatch.
   Apply to <body> or a full-bleed backdrop element.
   ============================================================ */
.reynard-atmosphere {
  background-color: var(--paper-200);
  background-image:
    url('assets/engraving-hatch.png'),
    url('assets/paper-texture.png');
  background-repeat: repeat, no-repeat;
  background-size: 120px 120px, cover;
  background-position: center, center;
}

/* ============================================================
   GLASS PANEL UTILITIES — the one signature treatment
   ============================================================ */
.glass {
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  border: 1px solid var(--glass-dark-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-glass-md), var(--inset-glass-hi);
  color: var(--text-on-dark);
}
.glass--light {
  background: var(--glass-light-bg);
  border-color: var(--glass-light-border);
  box-shadow: var(--sh-glass-md), var(--inset-light-hi);
  color: var(--text-on-light);
}
/* Stronger tint band specifically behind long body copy (sun legibility) */
.glass__readband {
  background: var(--glass-dark-bg-strong);
  border-radius: var(--r-md);
}

/* ============================================================
   SEMANTIC TYPE
   Headlines/wordmark = display. Paragraphs NEVER in display.
   ============================================================ */
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
}
.body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
}
.small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.45;
}
.data {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}