/* ==========================================================================
   DWA Accounting & Taxation — design tokens
   Brand: navy + silver from the dwa wordmark, blue accent for interaction.
   ========================================================================== */

:root {
  /* --- Brand scale -------------------------------------------------------
     Sampled from the supplied logo artwork, not approximated:
     navy #01004E and silver #ADADAD. navy-800 is the logo navy exactly.
     Darker steps carry hero/footer surfaces, lighter steps lift cards and
     borders sitting on dark. */
  --navy-900: #010036;
  --navy-800: #01004E;    /* logo navy */
  --navy-700: #14135F;
  --navy-600: #26257A;
  --navy-500: #3B3A96;

  --silver-400: #ADADAD;  /* logo silver */
  --silver-300: #C6C6C6;
  --silver-200: #E0E0E0;
  --silver-100: #F1F1F1;

  --blue-600: #2563EB;    /* links/text on light — 4.6:1 on white */
  --blue-500: #3B82F6;    /* accent on dark, large text, fills */
  --blue-400: #60A5FA;    /* hover on dark */

  --white: #FFFFFF;
  --off-white: #F5F5F7;
  --slate-600: #4B4B60;   /* muted body text on light — 8.2:1 on white */

  /* --- Semantic: light sections ---------------------------------------- */
  --bg: var(--white);
  --bg-alt: var(--off-white);
  --ink: var(--navy-800);
  --ink-muted: var(--slate-600);
  --rule: var(--silver-200);
  --link: var(--blue-600);

  /* --- Semantic: dark sections (hero, footer, feature bands) ------------ */
  --bg-dark: var(--navy-800);
  --bg-dark-deep: var(--navy-900);
  --ink-dark: var(--white);
  --ink-dark-muted: var(--silver-400);
  --rule-dark: rgba(173, 173, 173, 0.24);
  --link-dark: var(--blue-500);

  /* --- Focus ------------------------------------------------------------ */
  --focus: var(--blue-500);
  --focus-offset: 3px;

  /* --- Type -------------------------------------------------------------
     Bricolage Grotesque carries the headlines: a grotesque with enough
     personality (ink traps, a slightly narrow set) to read as this firm
     rather than any firm, set heavy so it holds its own over photography.
     IBM Plex Sans carries long copy with a documentation-grade plainness
     that suits compliance work. IBM Plex Mono sets every figure and label:
     years, counts, step numbers, phone numbers. Figures in a ledger face
     are the one typographic signature an accounting firm can own. */
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, ui-sans-serif, system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid display sizes — clamp so headings never overflow at 375px */
  --fs-hero: clamp(2.5rem, 1.4rem + 4.8vw, 5.25rem);
  --fs-h1: clamp(2.125rem, 1.4rem + 3.1vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --fs-body: 1.0625rem;   /* 17px — above the 16px mobile floor */
  --fs-sm: 0.9375rem;
  --fs-eyebrow: 0.78125rem;

  --lh-display: 1.0;
  --lh-heading: 1.12;
  --lh-body: 1.65;

  --fw-heading: 600;
  --fw-display: 700;
  --tracking-display: -0.025em;
  --tracking-eyebrow: 0.14em;

  /* --- Spacing (4px base) ----------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* --- Layout ----------------------------------------------------------- */
  --container: 78rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 3rem);
  --header-h: 5rem;

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 640ms;

  /* --- Elevation & shape -------------------------------------------------
     Two radius registers. Cards, inputs and dropdowns keep the original
     hairline radii; the hero refresh added a pill register for the floating
     navbar and buttons, and a panel register for the inset hero media. */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-photo: 0.875rem;   /* photographs and the map */
  --radius-pill: 999rem;
  --radius-panel: clamp(1.25rem, 0.6rem + 2vw, 3rem);
  --shadow-card: 0 1px 2px rgba(1, 0, 78, 0.07), 0 8px 24px rgba(1, 0, 78, 0.07);
  --shadow-card-hover: 0 2px 4px rgba(1, 0, 78, 0.09), 0 16px 40px rgba(1, 0, 78, 0.12);

  /* --- Z-index scale ----------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 20;
  --z-header: 30;
  --z-overlay: 40;
  --z-modal: 50;
}