/* ==========================================================================
   Design Tokens — Magnat Accounting Premium
   Single source of truth for color, type, spacing, motion, and layout.
   Every future section pulls from these variables — never hardcode a
   color, size, or duration directly in a component file.
   ========================================================================== */

:root {
  /* Color — neutrals (92%+ of the interface) */
  --color-ink: #0E0F12;
  --color-charcoal: #16181C;
  --color-graphite-line: #2A2D33;
  --color-paper: #F7F5F1;
  --color-ink-on-paper: #14161A;
  --color-slate: #8A93A0;
  --color-white: #FFFFFF;

  /* Color — accent (used at under 5% coverage: line, glow, or single CTA only) */
  --color-brass: #B08D4C;
  --color-brass-glow: rgba(176, 141, 76, 0.35);

  /* Color — paper-surface variants of slate/brass, darkened to clear 4.5:1
     against --color-paper. Regular slate/brass only clear ~2.9:1 on paper
     (fine on ink, which is what they were tuned for) — see the --color-slate
     and --color-brass overrides scoped onto .founder/.services/.industries/
     .faq in their own component files. */
  --color-slate-on-paper: #5C6472;
  --color-brass-on-paper: #7D5E2C;

  /* Color — form validation only. The one deliberate exception to "brass is
     the only accent": error states need a semantically distinct color that
     brass can't provide, so this is scoped to .form-error / [aria-invalid]. */
  --color-error: #C1554A;

  /* Hairline border on paper (light) sections — services, industries, and
     faq were each redefining this as a slightly different raw rgba value. */
  --color-hairline-paper: rgba(20, 22, 26, 0.12);

  /* Card hover elevation — one shadow for dark-surface cards (why-magnat,
     trust-value), one for paper-surface cards (industries, services rows).
     Ink-tinted rather than pure black, matching every other shadow/vignette
     on the site (hero-vignette, process-vignette, brand-name text-shadow). */
  --shadow-hover-dark: 0 12px 28px rgba(14, 15, 18, 0.35);
  --shadow-hover-light: 0 12px 28px rgba(20, 22, 26, 0.08);

  /* Typography — families */
  --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Typography — fluid scale, mobile-first (clamp min = mobile, max = desktop) */
  /* ~12% off the previous 5rem ceiling — was overpowering the founder photo */
  --text-hero: clamp(2.25rem, 1.4rem + 3.5vw, 4.4rem);
  --text-section-title: clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-founder-message: clamp(1.375rem, 1.2rem + 1vw, 2rem);
  --text-stat: clamp(3rem, 2rem + 5vw, 6rem);
  --text-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --text-eyebrow: 0.8125rem;
  --text-nav: 0.875rem;
  /* Shared by every "card/row title" element — why-card, trust-value-item,
     service-title, industry-title, faq-question — so they stay in sync
     instead of drifting between 1.05rem and 1.15rem per component. */
  --text-card-title: 1.15rem;
  /* Shared by every "numbered index" mark — services and industries both
     use this pattern; fluid so it scales the same way in both places. */
  --text-index: clamp(1.75rem, 1rem + 2vw, 2.5rem);

  /* Typography — rhythm */
  --leading-tight: 1.05;
  --leading-snug: 1.15;
  --leading-normal: 1.6;
  --tracking-eyebrow: 0.18em;
  --tracking-nav: 0.02em;

  /* Spacing scale — 8px base unit, use exclusively (no off-grid values) */
  --space-0-5: 0.25rem;   /* 4px */
  --space-1:   0.5rem;    /* 8px */
  --space-1-5: 0.75rem;   /* 12px */
  --space-2:   1rem;      /* 16px */
  --space-3:   1.5rem;    /* 24px */
  --space-4:   2rem;      /* 32px */
  --space-6:   3rem;      /* 48px */
  --space-8:   4rem;      /* 64px */
  --space-12:  6rem;      /* 96px */
  --space-16:  8rem;      /* 128px */
  --space-20:  10rem;     /* 160px */
  --space-25:  12.5rem;   /* 200px */
  --space-30:  15rem;     /* 240px */

  /* Section padding — three tiers only, fluid across breakpoints */
  --section-padding-compact:  clamp(2.5rem, 2rem + 2vw, 4rem);
  --section-padding-standard: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --section-padding-generous: clamp(5rem, 2.5rem + 10vw, 12.5rem);

  /* Layout */
  --container-max: 1600px;
  --margin-inline: clamp(1.5rem, 1rem + 4vw, 5rem);

  /* Fixed header clearance — brand-mark (59px) + nav-inner's own vertical
     padding (2 × 24px) + a small safety margin (measured header renders
     ~2px taller than that sum). Used as scroll-margin-top on every anchor
     target so nav/CTA jumps don't land with the section title hidden
     behind the header. */
  --header-offset: 7.25rem;

  /* Radius — 4px ceiling, site-wide, no exceptions */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* Motion — one curve for arrivals, one for responses. Never mix them. */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-response: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-micro: 200ms;
  --duration-reveal: 600ms;
  --duration-ambient: 70s;

  /* Z-index scale */
  --z-header: 100;
  --z-overlay: 200;
}