/* ============================================================
   GOSHEN ROOF RESTORATION & GUTTERS — DESIGN TOKENS
   Three-layer system: primitive -> semantic -> component
   Brand hexes (fixed, do not change): #A0522D #D2B48C #4B2E2E #FFFFFF #000000
   ============================================================ */

:root {
  /* ---------- 1. PRIMITIVE TOKENS ---------- */

  /* Brown / near-black scale (built around brand Dark Brown #4B2E2E) */
  --brown-900: #211313; /* darkened base, hero/page background */
  --brown-800: #4B2E2E; /* brand Dark Brown */
  --brown-700: #6B4340;
  --brown-600: #8A5B54;

  /* Terracotta / accent scale (built around brand Reddish-Brown #A0522D) */
  --terracotta-600: #A0522D; /* brand Reddish-Brown Roof */
  --terracotta-500: #B8663F; /* hover */
  --terracotta-400: #C97F52; /* active/light */
  --terracotta-glow: rgba(160, 82, 45, 0.35);

  /* Beige scale (built around brand Warm Beige #D2B48C) */
  --beige-300: #D2B48C; /* brand Warm Beige */
  --beige-200: #E3D0B5;
  --beige-100: #F3E9DA;

  /* Fixed neutrals */
  --white: #FFFFFF;
  --black: #000000;

  /* Neutral grays for legibility on dark surfaces */
  --gray-400: #A69C97;
  --gray-300: #C9C1BC;
  --gray-200: #E5E0DC;

  /* ---------- 2. SEMANTIC TOKENS ---------- */

  /* Backgrounds */
  --bg-primary: var(--brown-900);      /* dark hero / final-CTA sections */
  --bg-primary-alt: var(--brown-800);  /* slightly lighter dark section */
  --bg-secondary: var(--beige-100);    /* light content sections */
  --bg-surface: var(--brown-800);      /* cards on dark */
  --bg-surface-light: var(--white);    /* cards on light */

  /* Text */
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--gray-300);
  --text-on-light: var(--brown-900);
  --text-on-light-muted: var(--brown-700);

  /* Accent / interactive */
  --accent-primary: var(--terracotta-600);
  --accent-hover: var(--terracotta-500);
  --accent-active: var(--terracotta-400);
  --accent-on: var(--white);

  /* Borders & rings */
  --border-on-dark: rgba(255, 255, 255, 0.12);
  --border-on-light: rgba(33, 19, 19, 0.12);
  --focus-ring: var(--beige-300);

  /* ---------- 3. COMPONENT TOKENS ---------- */

  --btn-primary-bg: var(--accent-primary);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-text: var(--white);

  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--border-on-dark);
  --btn-secondary-text: var(--text-on-dark);

  --card-bg-dark: var(--bg-surface);
  --card-border-dark: var(--border-on-dark);
  --card-bg-light: var(--bg-surface-light);
  --card-border-light: var(--border-on-light);
  --card-radius: 16px;

  --nav-bg: rgba(33, 19, 19, 0.0);
  --nav-bg-scrolled: rgba(33, 19, 19, 0.85);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Calistoga', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-hero: clamp(2.75rem, 3rem + 4vw, 6.5rem);
  --text-h2: clamp(2rem, 1.6rem + 2.5vw, 3.5rem);
  --text-h3: clamp(1.375rem, 1.2rem + 1vw, 1.875rem);
  --text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-label: 0.75rem;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;

  /* ---------- SPACING (8px rhythm) ---------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---------- RADIUS / SHADOW / MOTION ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 48px var(--terracotta-glow);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  --z-nav: 100;
  --z-cursor: 200;
  --z-overlay: 150;
}