/*
  Design tokens — Sina's Roofing & Repair
  Direction: "Angled Trust" (state/DECISIONS.md, Phase 2)
  Single source of truth for every visual value on the site.
  Consumers use var(--token) only — never hardcode a value elsewhere.
*/

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/barlowcondensed-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow-600.woff2') format('woff2');
}

:root {
  /* Colors — client's own hex palette (client/client.md Vibe), used verbatim.
     --color-accent (#F05A28) measures 3.39:1 on white: passes the 3:1
     large-text/UI threshold but NOT 4.5:1 body text. Reserve it for large
     bold fills (buttons >=16px bold, icons, borders, active states) only.
     Never use it for body-sized text or links — use --color-error
     (5.12:1 on white) instead when an accent-colored TEXT is needed. */
  --color-primary: #003B73;
  --color-primary-dark: #002A55;
  --color-accent: #F05A28;
  --color-bg: #FFFFFF;
  --color-surface: #F3F5F7;
  --color-text: #1C1C1E;
  --color-text-muted: #6B6F76;
  --color-border: #D9DEE5;
  --color-success: #1E7A4C;
  --color-error: #C93A1A;

  /* Typography — "Bold energy" pairing: condensed grotesque display +
     plain grotesque body (same type family, siblings), per Vibe's
     "Large bold headlines" + "no-nonsense" mood. Expressive 1.333 scale. */
  --font-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-hero: clamp(2.25rem, 5vw + 1rem, 4.5rem);

  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --leading-loose: 1.8;

  /* Spacing — 4px base scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;

  /* Layout */
  --container-max: 1200px;
  --section-pad-y: clamp(3rem, 6vw, 6rem);

  /* Radius — deviation: "Angled Trust" direction (sharp angled accents,
     zero soft/organic shapes) uses minimal/sharp radii, not the usual
     soft-rounded default. radius-full stays for circular elements only
     (icons, avatars, pill badges). */
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-full: 999px;

  /* Elevation — tinted toward charcoal (--color-text), not pure black */
  --shadow-sm: 0 1px 2px rgba(28, 28, 30, 0.08);
  --shadow-md: 0 4px 12px rgba(28, 28, 30, 0.12);
  --shadow-lg: 0 12px 32px rgba(28, 28, 30, 0.16);

  /* Motion — subtle (per Phase 2 rationale) */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}