/**
 * Design Tokens — Mario's Handyman Services
 * All colors, typography, spacing, and breakpoints as CSS custom properties.
 * Source: Brand Style Guide (Confluence MHS space)
 */

:root {
  /* ─── Primary Colors ─── */
  --color-walnut: #3B2415;
  --color-cream: #F5F0E8;
  --color-copper: #B87333;

  /* ─── Secondary Colors ─── */
  --color-cedar: #4A6741;
  --color-terracotta: #C4724E;
  --color-steel: #6B7B8D;

  /* ─── Supporting Colors ─── */
  --color-parchment: #E8DFD0;
  --color-leather: #8B6F47;
  --color-smoke: #4A4A4A;

  /* ─── Semantic Colors ─── */
  --color-text: var(--color-smoke);
  --color-heading: var(--color-walnut);
  --color-bg: var(--color-cream);
  --color-bg-alt: var(--color-parchment);
  --color-accent: var(--color-copper);
  --color-cta-bg: var(--color-walnut);
  --color-cta-text: var(--color-cream);
  --color-link: var(--color-copper);
  --color-link-hover: var(--color-terracotta);
  --color-success: var(--color-cedar);
  --color-error: #C0392B;

  /* ─── Typography ─── */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ─── Type Scale (Mobile-first) ─── */
  --text-h1: clamp(2rem, 5vw, 4rem);        /* 32–64px */
  --text-h2: clamp(1.5rem, 3.5vw, 2.5rem);  /* 24–40px */
  --text-h3: clamp(1.25rem, 2.5vw, 1.75rem); /* 20–28px */
  --text-h4: clamp(1.125rem, 2vw, 1.25rem); /* 18–20px */
  --text-body: 1rem;                          /* 16px */
  --text-small: 0.875rem;                     /* 14px */
  --text-caption: 0.8125rem;                  /* 13px */
  --text-label: 0.8125rem;                    /* 13px */

  /* ─── Font Weights ─── */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ─── Spacing Scale ─── */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */

  /* ─── Layout ─── */
  --max-width: 1200px;
  --max-width-narrow: 800px;
  --gutter: var(--space-md);
  --section-padding: var(--space-2xl) var(--gutter);

  /* ─── Borders & Radius ─── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --border-width: 2px;

  /* ─── Shadows ─── */
  --shadow-sm: 0 1px 3px rgba(59, 36, 21, 0.08);
  --shadow-md: 0 4px 12px rgba(59, 36, 21, 0.1);
  --shadow-lg: 0 8px 24px rgba(59, 36, 21, 0.12);

  /* ─── Transitions ─── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ─── Z-Index Scale ─── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* Tablet and up */
@media (min-width: 768px) {
  :root {
    --gutter: var(--space-lg);
    --section-padding: var(--space-3xl) var(--gutter);
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  :root {
    --gutter: var(--space-xl);
    --section-padding: var(--space-4xl) var(--gutter);
  }
}