/**
 * Walters Construction FL — Design System Tokens
 *
 * CSS custom properties for brand colors, typography, spacing, and layout.
 * All site styles should consume these variables rather than hardcoding values.
 *
 * Usage:
 *   color: var(--color-primary);
 *   font-size: var(--font-size-xl);
 *   margin-bottom: var(--space-6);
 */

/* ─────────────────────────────────────────────────────────────────────────────
   COLORS
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Primary brand color: Walters Construction deep navy */
  --color-primary:       #02245e;
  --color-primary-light: #0a3a8a;
  --color-primary-dark:  #011838;
  --color-primary-hover: #0a3a8a;
  --color-primary-active:#011838;
  --color-primary-muted: rgba(2, 36, 94, 0.7);

  /* Accent: warm gold — complements navy for construction/luxury context */
  --color-accent:       #c9a227;
  --color-accent-light: #dbb94a;
  --color-accent-dark:  #a88520;

  /* Neutral scale */
  --color-white:     #ffffff;
  --color-gray-50:   #f9fafb;
  --color-gray-100:  #f3f4f6;
  --color-gray-200:  #e5e7eb;
  --color-gray-300:  #d1d5db;
  --color-gray-400:  #9ca3af;
  --color-gray-500:  #6b7280;
  --color-gray-600:  #4b5563;
  --color-gray-700:  #374151;
  --color-gray-800:  #1f2937;
  --color-gray-900:  #111827;
  --color-black:     #000000;

  /* Semantic aliases */
  --color-text-primary:   var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted:     var(--color-gray-400);
  --color-text-inverse:   var(--color-white);

  --color-bg-primary:   var(--color-white);
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-accent:    var(--color-primary);

  --color-border-light:   var(--color-gray-200);
  --color-border-default: var(--color-gray-300);
  --color-border-dark:    var(--color-gray-400);

  /* Feedback states */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error:   #ef4444;
  --color-info:    #3b82f6;

  /* ── Brand heading color palette (WU-5-2) ─────────────────────────────────
     Heading tokens are separate from the generic text scale so brand changes
     propagate from one place rather than scattered across component files.  */
  --color-heading-primary:   var(--color-primary);       /* #02245e navy  */
  --color-heading-secondary: var(--color-gray-700);      /* #374151        */
  --color-heading-accent:    var(--color-accent);        /* #c9a227 gold   */
  --color-heading-on-dark:   var(--color-white);         /* white on dark  */
  --color-heading-on-dark-muted: rgba(255, 255, 255, 0.87);

  /* ── Brand contact config (WU-5-3) ───────────────────────────────────────
     Canonical contact values — documented here for reference only.
     These are text constants, not CSS properties; see docs/brand/ for usage. */
  /* company: Walters Construction, LLC              */
  /* email:   info@waltersfl.com                     */
  /* phone:   (386) 663-1295                         */
  /* address: 421 N Causeway, New Smyrna Beach, FL   */
}


/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Font families — Inter first; falls back to system fonts */
  --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Size scale — approximately 1.25 Major Third ratio */
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */
  --font-size-4xl:  2.25rem;   /* 36px */
  --font-size-5xl:  3rem;      /* 48px */
  --font-size-6xl:  3.75rem;   /* 60px */

  /* Weights */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Line heights */
  --line-height-none:    1;
  --line-height-tight:   1.25;
  --line-height-snug:    1.375;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose:   2;

  /* Letter spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight:   -0.025em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;
  --letter-spacing-widest:  0.1em;
}


/* ─────────────────────────────────────────────────────────────────────────────
   SPACING
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Base-4 spacing scale (1 unit = 4px = 0.25rem) */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Container max-widths */
  --container-sm:   24rem;   /* 384px */
  --container-md:   28rem;   /* 448px */
  --container-lg:   32rem;   /* 512px */
  --container-xl:   36rem;   /* 576px */
  --container-2xl:  42rem;   /* 672px */
  --container-3xl:  48rem;   /* 768px */
  --container-4xl:  56rem;   /* 896px */
  --container-5xl:  64rem;   /* 1024px */
  --container-6xl:  72rem;   /* 1152px */
  --container-7xl:  80rem;   /* 1280px */
  --container-full: 100%;

  /* Semantic layout */
  --content-max-width: var(--container-6xl);
  --content-padding:   var(--space-4);

  /* Grid gaps */
  --gap-xs: var(--space-2);
  --gap-sm: var(--space-4);
  --gap-md: var(--space-6);
  --gap-lg: var(--space-8);
  --gap-xl: var(--space-12);
}


/* ─────────────────────────────────────────────────────────────────────────────
   BREAKPOINTS
   Note: CSS custom properties cannot be used inside media query conditions.
   These values are documented here for reference; use the pixel values directly
   in media queries throughout the codebase.

   Mobile-first approach — base styles target mobile.
     sm:  640px  — small tablets and up
     md:  768px  — tablets and up
     lg:  1024px — laptops and up
     xl:  1280px — desktops and up
     2xl: 1536px — large desktops
   ───────────────────────────────────────────────────────────────────────────── */

/* Content padding grows at each breakpoint */
@media (min-width: 768px) {
  :root {
    --content-padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --content-padding: var(--space-8);
  }
}