/**
 * tokens.css — Novagroup Design System Tokens
 * ALL colors, spacing, type, motion, z-index, and layout values live here.
 * No other CSS file may contain hard-coded hex values, px magic numbers,
 * or duration/easing literals — reference these vars exclusively.
 *
 * Rule: if you add a new token, document it in this file.
 * Rule: if you need a value not covered here, add a token here first.
 */

:root {

  /* ============================================================
   * PALETTE
   * ============================================================ */

  /* Core brand */
  --c-navy:        #0B1E3F;   /* primary dark — backgrounds, headings overlay */
  --c-navy-deep:   #061429;   /* deeper overlay — hero gradient bottom */
  --c-navy-mid:    #112952;   /* hover state on navy surfaces */
  --c-steel:       #5B6B7C;   /* secondary text, dividers, placeholder text */
  --c-copper:      #B87333;   /* accent — CTA, focus, hover underline, numerals */
  --c-copper-bright: #D08A45; /* copper hover — buttons, links on hover */
  --c-copper-deep: #8E5824;   /* copper active / visited */
  --c-copper-text: var(--c-copper-deep); /* copper for TEXT on light surfaces — AA 5.53:1 on bone (decorative copper stays --c-copper) */
  --c-bone:        #F7F8FA;   /* light surface — alt light band, cards */
  --c-bone-deep:   #EFF1F5;   /* section ground under white cards — ~5-6% delta so cards separate */
  --c-bone-2-surface: #FBFCFD;/* barely-elevated panel — raised surface between bone and white */
  --c-ink:         #0A0A0A;   /* body text on light surfaces */
  --c-fog:         #C9CFD6;   /* borders, dividers */
  --c-fog-2:       #E5E8ED;   /* subtle separator — between sections */
  --c-white:       #FFFFFF;   /* pure white — text on dark, nav on dark */

  /* Hero warm-glow — faint copper radial in the lower hero so the accent sits
   * in a warm pocket that echoes the dusk footage (id:hero-overlay-warmth-tie) */
  --hero-warm-glow: rgba(184, 115, 51, 0.14);

  /* ============================================================
   * TYPOGRAPHY
   * ============================================================ */

  /* Families */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale (fluid clamp — min → preferred → max)
   * Base: 1rem = 16px. Display only used for 404/hero. */
  --fs-display: clamp(4rem,   10vw, 9rem);     /* 404, oversized decor */
  --fs-h1:      clamp(2.75rem, 5.5vw, 5rem);   /* hero headline */
  --fs-h2:      clamp(2rem,    3.8vw, 3.25rem);/* section titles */
  --fs-h3:      clamp(1.25rem, 2vw,   1.65rem);/* card headings */
  --fs-h4:      clamp(1.0625rem, 1.4vw, 1.25rem); /* sub-headings */
  --fs-eyebrow: 0.75rem;   /* uppercase tracking-wide label */
  --fs-body:    1.0625rem; /* 17px — main paragraph text */
  --fs-small:   0.875rem;  /* 14px — captions, meta, badge text */
  --fs-nav:     0.9375rem; /* 15px — navigation links */

  /* Tracking / letter-spacing */
  --tracking-tight:   -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-eyebrow:  0.18em;

  /* Leading / line-height */
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-body:    1.7;
  --leading-relaxed: 1.85;

  /* ============================================================
   * SPACING SCALE  (8px base)
   * ============================================================ */
  --sp-1:   4px;    /* micro gap, icon padding */
  --sp-2:   8px;    /* tight inline gap */
  --sp-3:   16px;   /* default inner padding */
  --sp-4:   24px;   /* standard component gap */
  --sp-5:   32px;   /* medium section gap */
  --sp-6:   48px;   /* large inner section */
  --sp-7:   64px;   /* mobile section padding */
  --sp-8:   96px;   /* tablet section padding */
  --sp-9:   120px;  /* desktop section padding */
  --sp-10:  160px;  /* hero bottom padding */
  --sp-11:  200px;  /* jumbo top padding */
  --sp-12:  256px;  /* extreme — hero height complement */

  /* ============================================================
   * MOTION / ANIMATION
   * ============================================================ */

  /* Easing curves */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);       /* smooth pro */
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);    /* slight overshoot */
  --ease-linear:     linear;

  /* Durations */
  --dur-micro:     150ms;  /* tooltip, ripple */
  --dur-short:     280ms;  /* hover state transitions */
  --dur-medium:    480ms;  /* reveal animations, panel slide */
  --dur-long:      800ms;  /* section transitions, hero sweep */
  --dur-cinematic: 1200ms; /* hero word reveal */

  /* Reveal defaults (used by scroll-animations.js)
   * Travel bumped 12px → 20px so the rise reads as deliberate motion, not a plain
   * fade; large blocks ([data-reveal=lg]) go further via layout.css. (#31) */
  --reveal-translate-y: 20px;
  --reveal-stagger:     80ms;

  /* ============================================================
   * Z-INDEX SCALE
   * ============================================================ */
  --z-below:     -1;
  --z-base:       0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    500;
  --z-modal:      900;
  --z-cursor:     1000;

  /* ============================================================
   * LAYOUT
   * ============================================================ */
  --container-max: 1280px;
  --container-pad: clamp(1.5rem, 5vw, 4rem); /* responsive horizontal padding */
  --grid-cols:     12;
  --gutter:        24px;

  /* Breakpoints (reference values — used as comments in @media queries since
   * CSS @media cannot read custom properties). Standardized to kill the 768-900
   * tablet dead-band: nav + pillars both collapse at 900, single-column at 600. (#19) */
  --bp-tablet:     900px; /* nav collapses to drawer; pillars go 2-up then stack */
  --bp-phone:      600px; /* single-column stacks */

  /* ============================================================
   * SEMANTIC / STATE COLORS
   * ============================================================ */
  --c-error:   #c0392b;  /* form validation error */
  --c-success: #27ae60;  /* form success state */
  --c-warning: #e67e22;  /* non-critical warning */

  /* ============================================================
   * FOCUS RING  (WCAG AA compliant)
   * ============================================================ */
  --focus-ring-color:  var(--c-copper);
  --focus-ring-width:  2px;
  --focus-ring-offset: 3px;
  --focus-ring-style:  solid;

  /* ============================================================
   * SHADOWS
   * ============================================================ */
  --shadow-sm:  0 1px 4px rgb(11 30 63 / 0.07);
  --shadow-md:  0 4px 16px rgb(11 30 63 / 0.10);
  --shadow-lg:  0 12px 40px rgb(11 30 63 / 0.14);
  --shadow-xl:  0 24px 72px rgb(11 30 63 / 0.18);

  /* ============================================================
   * BORDER RADIUS
   * ============================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

}