/* Vereen Injury Medical Group — design tokens
   Source of truth for the marketing site AND the future portal app
   (Tailwind mapping lives in DESIGN.md). Values finalized in the
   approved Impeccable direction, 2026-08-04. */

@font-face {
  font-family: "Libre Caslon Display";
  src: url("../fonts/libre-caslon-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/libre-caslon-text-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("../fonts/libre-caslon-text-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* THERE IS NO BOLD LIBRE CASLON TEXT, and the 700 face is deliberately not
   declared. `libre-caslon-text-700.woff2` is a BYTE-IDENTICAL copy of the 400
   (both md5 001d520e…, both 16,984 bytes) — the regular under a bold filename.

   Declaring it at font-weight: 700 was worse than declaring nothing: a browser
   matches a 700 request to that face and renders regular WITHOUT synthesizing
   bold, so the markup says bold, the screen shows book weight, and nothing
   warns. Removed 2026-08-14 (owner-confirmed). Nothing on this page renders
   differently — index.html uses this family in exactly one place, `.h1 em`, as
   italic, never bold.

   With no 700 face declared, a `font-weight: 700` in this family now
   SYNTHESIZES bold: visibly wrong, therefore caught, instead of silently wrong.
   Emphasis in this family is the italic; bold text belongs to Hanken Grotesk.
   If a genuine bold cut is ever subsetted, restore the block here AND in
   application/frontend/src/fonts/index.ts. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* color — navy ramp */
  --color-navy-950: #06131f;   /* backstop behind the luminous field */
  --color-navy-900: #081a2c;
  --color-navy-700: #0e2740;   /* base navy */
  --color-navy-500: #16344f;
  --color-navy-400: #17436a;   /* luminous — hero radial top-right lift */
  --color-navy-300: #3e5c74;
  --color-slate-500: #4a5560;  /* secondary text on ivory — 7.12:1 */

  /* color — gold ramp */
  --color-gold-700: #7a6030;   /* text-safe gold on ivory — 5.54:1 */
  --color-gold-500: #c6a662;   /* base gold — accents/CTA fills only, never small text on ivory */
  --color-gold-300: #e9d296;   /* gold text on navy fields — 10.2:1 on navy-700 */

  /* color — ivory ramp */
  --color-ivory-100: #fbf7ee;  /* base ivory — page ground */
  --color-ivory-50:  #fbf9f3;  /* raised cards on ivory */
  --color-parchment-200: #f6f1e7; /* recessed fields, alt bands */

  /* type families */
  --font-display: "Libre Caslon Display", Georgia, serif;   /* headlines only */
  --font-serif-text: "Libre Caslon Text", Georgia, serif;   /* editorial body moments, pull-quotes, eyebrow italics */
  --font-sans: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif; /* UI, body, vignettes */

  /* type scale (mobile-first) */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: 2.125rem;
  --text-3xl: 2.75rem;
  --text-4xl: 3.5rem;

  /* tracking */
  --tracking-kicker: 0.28em;   /* the one eyebrow/kicker voice (One Kicker Rule) */

  /* layout spine (Phase 6) — one left edge, one nav height, one anchor offset.
     --gutter and --nav-offset carry a desktop base here and step down at the
     existing ≤1040px breakpoint (redeclared on :root in index-v3's responsive
     block, since that is where the file already steps padding). --anchor-offset
     is a single value sized to the sticky nav. */
  --gutter: 56px;              /* the one content gutter (nav-in / .container / .container.wide); 24px ≤1040px */
  --nav-offset: 78px;          /* sticky nav height = the hero's negative-margin pull; 70px ≤1040px */
  --anchor-offset: 92px;       /* unified scroll-margin-top for anchored sections + FAQ items */

  /* spacing scale */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --space-24: 6rem; --space-32: 8rem;

  /* radii, shadows, motion */
  --radius-sm: 4px; --radius-btn: 5px; --radius-md: 8px; --radius-lg: 16px;
  --shadow-console: 0 62px 120px -30px rgb(8 26 44 / 0.62), 0 12px 30px -10px rgb(8 26 44 / 0.22);
  --shadow-panel: 0 24px 64px -16px rgb(8 26 44 / 0.35);
  --shadow-card: 0 8px 24px -8px rgb(8 26 44 / 0.18);

  /* motion — one coherent duration family (Phase 4: retires the 12 hand-written
     literals + the four stagger ladders that were scattered through the page).
     fast/slow kept: they still own nav chrome (hover colour, nav-bg + overlay
     fades). ui/panel/reveal are the new mid-band steps; stagger is the one
     step; reveal-y is the one entrance distance. */
  --reveal-y: 18px;            /* one entrance distance (retires the 16/18px split) */
  --duration-fast: 150ms;      /* quick chrome hovers (.transi, nav links, console chrome) */
  --duration-ui: 250ms;        /* hover / colour / state change on components */
  --duration-panel: 280ms;     /* accordion + menu height */
  --duration-slow: 400ms;      /* larger surface fades (nav-bg, overlay, ambient glow, photo) */
  --duration-reveal: 600ms;    /* scroll-reveal entrance */
  --reveal-stagger: 80ms;      /* one stagger step (retires 70/250/100/60ms) */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* texture — Phase 5 grain paper. One fixed, desaturated feTurbulence tile
     over the whole page unifies the alternating bands into one printed object.
     Kept low so body/small text still clears WCAG AA over both grounds. */
  --grain-opacity: 0.035;

  --hero-field: radial-gradient(125% 90% at 80% 8%, var(--color-navy-400) 0%, var(--color-navy-700) 48%, var(--color-navy-900) 100%);
}