/* ==========================================================================
   Orion Taxidermy and Safari Studio — Design Tokens
   Extracted from live source (VISUAL_RECON) 2026-07-27. See docs/04-design-system.json.
   Signature: near-black grounds, torn forest-green texture bands, vivid green
   display type, Krona One nav, DM Serif italic for scripture + quotes.
   ========================================================================== */
:root {
  /* --- Brand --- */
  --c-green: #00FE00;            /* SIGNATURE: display headings + CTA (source pure green) */
  --c-green-blaze: #16C60C;      /* optional refined interactive green (pending approval) */
  --c-slate: #2C4251;            /* brand ink on light grounds */
  --c-band-hunter: #6E9A3C;      /* green band base */
  --c-band-sage: #7E9283;
  --c-button-ink: #463939;       /* dark text on green CTA */

  /* --- Grounds --- */
  --c-black: #0A0A0A;            /* primary dark background */
  --c-true-black: #000000;       /* header/footer/hero */
  --c-white: #FFFFFF;

  /* --- Neutral ramp --- */
  --c-n50: #F7F7F7;
  --c-n100: #EEEEEE;
  --c-n200: #E6E6E6;
  --c-n500: #999999;
  --c-n600: #666666;

  /* --- Semantic text --- */
  --text-on-dark: #EDEDED;
  --text-on-dark-muted: #B8B8B8;
  --text-on-light: #2C4251;
  --text-on-green-band: #0A0A0A; /* near-black for AA on green */

  /* --- Borders / overlay --- */
  --border-on-dark: 1px solid rgba(255,255,255,0.14);
  --border-on-light: 1px solid rgba(44,66,81,0.18);
  --overlay-scrim: rgba(0,0,0,0.45);
  --overlay-photo-hover: rgba(0,0,0,0.30);

  /* --- Type families (self-hosted; see assets/fonts) --- */
  --font-display: "Krona One", "Arial Black", sans-serif;
  --font-heading: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;

  /* --- Type scale --- */
  --fs-hero: clamp(2.5rem, 6vw, 3.75rem);
  --fs-h2: clamp(2rem, 4vw, 2.8125rem);
  --fs-h3: 1.875rem;
  --fs-body: 1.125rem;
  --fs-nav: 0.9375rem;
  --fs-button: 1.0625rem;
  --fs-quote: clamp(1.375rem, 2.5vw, 1.75rem);
  --fs-caption: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.5;
  --lh-quote: 1.4;
  --ls-nav: 0.45px;
  --ls-eyebrow: 0.12em;
  --ls-hero: -0.01em;

  /* --- Geometry --- */
  --radius: 0px;                 /* deliberate square corners */
  --container-max: 1200px;
  --container-content: 1140px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --control-h: 48px;

  /* --- Spacing (8px base) --- */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;
  --section-y: clamp(3.5rem, 8vw, 6rem);
  --grid-gap: clamp(0.5rem, 1.5vw, 1rem);

  /* --- Depth --- */
  --shadow-photo: 0 10px 30px rgba(0,0,0,0.5);
  --shadow-card-light: 0 2px 12px rgba(44,66,81,0.12);

  /* --- Motion --- */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}