/* TrussLE family brand tokens — from TrussLE.io Brand Guide, Option 03.
   Shared by TrussLE.io, StormWX.io and RoofWX.com. Do not change values here
   without updating the brand guide. */

:root {
  /* Brand colors */
  --navy: #142D4E;          /* Midnight Navy: names, headlines, body, dark backgrounds */
  --teal: #00B8A9;          /* Signal Teal: suffix, roofline, buttons, highlights. Not for small text on white */
  --slate: #64748B;         /* Slate: domain endings, secondary text, captions, borders */
  --cloud: #F4F7FA;         /* Cloud: page and panel backgrounds */
  --white: #FFFFFF;

  /* Derived (tints/shades of brand colors only) */
  --navy-900: #0E2139;
  --navy-700: #1E3C63;
  --navy-a12: rgb(20 45 78 / 0.12);
  --navy-a06: rgb(20 45 78 / 0.06);
  --teal-600: #009E91;
  --teal-a15: rgb(0 184 169 / 0.15);
  --slate-200: #CBD5E1;     /* used in the reversed logo */
  --on-navy-muted: #B7C3D3;

  /* Semantic */
  --color-bg: var(--white);
  --color-surface: var(--cloud);
  --color-text: var(--navy);
  --color-text-muted: var(--slate);
  --color-border: var(--navy-a12);
  --color-accent: var(--teal);
  --color-focus: var(--teal);
  --color-error: #B42318;

  /* Type: Outfit (headlines, subheads, buttons), Inter (body, forms, labels) */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --text-hero: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgb(20 45 78 / 0.08);
  --shadow-md: 0 8px 24px -8px rgb(20 45 78 / 0.18);
  --shadow-lg: 0 24px 60px -20px rgb(20 45 78 / 0.35);

  --container: 1200px;
  --container-narrow: 760px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}