/* Mortaro Authority — Design Tokens v4 (rizkad-style: cream + bold grotesque + brass)
   Light-led, huge type, brass accent (their orange → our brand brass). Brand navy/cream. */

:root {
  /* ---- Colour ---- */
  --cream: #F3EEE4;         /* warm canvas (rizkad-like) */
  --cream-2: #ECE5D7;       /* slightly deeper light section */
  --paper: #FBF8F1;         /* lightest cards */
  --ink: #15181B;           /* near-black headings / text */
  --navy: #1F3442;          /* brand navy (secondary dark) */
  --night: #14181C;         /* dark feature surface */
  --night-2: #1B2026;       /* raised on dark */
  --brass: #BC7A2C;         /* accent — punchy warm brass (their orange role) */
  --brass-bright: #D08A30;  /* brighter accent / highlights */
  --slate: #6E6A60;         /* muted text on cream */
  --line: rgba(21, 24, 27, 0.14);
  --line-soft: rgba(21, 24, 27, 0.08);
  --brass-soft: rgba(188, 122, 44, 0.12);

  /* on dark feature surfaces */
  --on-dark: #F3EEE4;
  --on-dark-muted: #9A958A;
  --line-dark: rgba(243, 238, 228, 0.16);

  /* text roles (default = cream canvas) */
  --text: #2A2C2C;
  --text-muted: #6E6A60;
  --heading: var(--ink);

  /* ---- Typography ---- */
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-cond: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;

  /* Grotesque scale — sized to fit a standard laptop hero without overflow */
  --fs-mega: clamp(2.5rem, 1.3rem + 4.4vw, 5.5rem);
  --fs-display: clamp(2.2rem, 1.3rem + 3vw, 4.25rem);
  --fs-h1: var(--fs-display);
  --fs-h2: clamp(1.9rem, 1.25rem + 2.4vw, 3.25rem);
  --fs-h3: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  --fs-lead: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.82rem;

  --lh-display: 0.92;
  --lh-heading: 1.0;
  --lh-body: 1.6;

  /* ---- Spacing ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 140px;
  --space-section: clamp(64px, 8vw, 120px);

  /* ---- Layout ---- */
  --maxw: 1320px;
  --maxw-wide: 1560px;
  --maxw-narrow: 760px;
  --gutter: clamp(22px, 5vw, 72px);

  /* ---- Radius / elevation ---- */
  --radius: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 0 var(--line-soft), 0 30px 60px -40px rgba(21,24,27,.4);
  --shadow-float: 0 40px 90px -45px rgba(21,24,27,.5);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur: 800ms;

  --header-h: 78px;
  --urgency-h: 40px;
}
@media (max-width: 640px) { :root { --header-h: 62px; --urgency-h: 36px; } }