/* ==========================================================================
   tokens.css
   MR. MA RENOVATION - Design tokens (colors, fonts, spacing, etc.)
   Change a value here and it updates across the whole website.
   ========================================================================== */

:root {
  /* ---------- Colors: brand ---------- */
  --color-navy: #0f1b2d;          /* header, hero overlay, footer */
  --color-charcoal: #262b33;      /* headings, dark sections */
  --color-copper: #9c5e2b;        /* primary buttons (safe with white text) */
  --color-copper-accent: #b8733a; /* icons, lines, large highlights */
  --color-copper-dark: #7d4a20;   /* button hover */
  --color-gold: #d9a869;          /* labels on dark backgrounds, focus ring */

  /* ---------- Colors: neutrals ---------- */
  --color-warm-white: #faf8f5;    /* page background */
  --color-white: #ffffff;         /* cards */
  --color-slate: #3a4350;         /* body text */
  --color-stone: #6b7380;         /* captions, secondary text */
  --color-sand: #e7e1d8;          /* borders, dividers */

  /* ---------- Colors: functional ---------- */
  --color-whatsapp: #1fa855;      /* WhatsApp buttons only */
  --color-whatsapp-dark: #178a44;

  /* ---------- Typography ---------- */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Font sizes: fluid (they scale smoothly between mobile and desktop) */
  --text-h1: clamp(2.375rem, 1.6rem + 3.2vw, 3.75rem);   /* about 38px to 60px */
  --text-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);    /* about 28px to 40px */
  --text-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);     /* about 20px to 24px */
  --text-body: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem); /* about 16px to 17px */
  --text-small: 0.875rem;                                 /* 14px */
  --text-label: 0.8125rem;                                /* 13px */

  --line-height-body: 1.65;
  --line-height-heading: 1.2;

  /* ---------- Spacing (8px base scale) ---------- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 1rem;     /* 16px */
  --space-4: 1.5rem;   /* 24px */
  --space-5: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-7: 4rem;     /* 64px */
  --space-8: 6rem;     /* 96px */
  --space-9: 8rem;     /* 128px */

  /* Section vertical padding: smaller on mobile, bigger on desktop */
  --section-padding: clamp(3.5rem, 2.5rem + 4vw, 6rem); /* about 56px to 96px */

  /* ---------- Layout ---------- */
  --container-max: 75rem;  /* 1200px */
  --container-pad: 1.25rem; /* 20px, increased on larger screens in layout.css */

  /* ---------- Shape and depth ---------- */
  --radius-sm: 0.5rem;   /* 8px, buttons */
  --radius-md: 0.75rem;  /* 12px, cards */
  --shadow-sm: 0 1px 3px rgba(15, 27, 45, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 27, 45, 0.1);

  /* ---------- Motion ---------- */
  --transition: 200ms ease;

  /* ---------- Accessibility ---------- */
  --focus-ring: 3px solid var(--color-gold);
  --focus-offset: 2px;
  --touch-target: 2.75rem; /* 44px minimum */
}