/* ==========================================================================
   tokens.css — Gilbert Pest Control Pros
   Design tokens (color, type, spacing, radius, shadow, motion).
   Source of truth: Design Brief §3 + Developer Brief §3.
   Components reference semantic names only, never raw hex.
   ========================================================================== */

:root {
  /* --- Raw palette --- */
  --green-900: #04342C;   /* darkest ink-green, footer ground (dev brief) */
  --green-700: #0F6E56;   /* primary brand green (dev brief authoritative) */
  --green-500: #15876A;   /* lighter green, hovers and fills */
  --green-300: #7ABF83;   /* soft green tint */
  --amber-500: #BA7517;   /* warm accent, Arizona burnt sienna */
  --amber-300: #EF9F27;   /* accent highlight, used sparingly */
  --sand-50:  #FAF7F0;    /* off-white page background */
  --sand-100: #F1EFE8;    /* surface / card tint */
  --sand-200: #E7E3D8;    /* hairline borders on sand */
  --ink-900:  #1A1A1A;    /* primary text */
  --ink-600:  #5F5E5A;    /* secondary text */
  --white:    #FFFFFF;

  /* --- Semantic tokens --- */
  --color-cta:          var(--amber-500);
  --color-cta-hover:    #9A610F;
  --color-brand:        var(--green-700);
  --color-brand-mid:    var(--green-500);
  --color-brand-deep:   var(--green-900);
  --color-accent:       var(--amber-300);
  --color-surface:      var(--white);
  --color-surface-tint: var(--sand-100);
  --color-page:         var(--sand-50);
  --color-text-primary: var(--ink-900);
  --color-text-secondary: var(--ink-600);
  --color-border:       var(--sand-200);
  --color-focus:        #185FA5;

  /* --- Typography --- */
  --font-display: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* fluid type scale (mobile -> desktop via clamp) */
  --fs-h1:   clamp(1.875rem, 1.2rem + 3vw, 2.875rem);   /* 30 -> 46 */
  --fs-h2:   clamp(1.5rem, 1.15rem + 1.6vw, 1.875rem);  /* 24 -> 30 */
  --fs-h3:   clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);/* 19 -> 22 */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); /* 18 -> 20 */
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);   /* 16 -> 18 */
  --fs-cta:  clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem); /* 20 -> 22 */
  --fs-meta: 0.8125rem;                                 /* 13 -> 14 */

  /* --- Spacing scale (8pt, 4 for detail) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* section rhythm */
  --section-y: clamp(3rem, 2rem + 5vw, 6rem);  /* 48 -> 96 */
  --gutter:    clamp(1rem, 0.4rem + 3vw, 5rem); /* 16 -> 80 */
  --maxw:      1200px;
  --maxw-prose: 72ch;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Shadow (single elevation) --- */
  --shadow-card: 0 1px 2px rgba(4,52,44,.06), 0 8px 24px rgba(4,52,44,.08);
  --shadow-lift: 0 2px 6px rgba(4,52,44,.08), 0 18px 40px rgba(4,52,44,.14);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --t-ui: 180ms;
  --t-reveal: 480ms;

  /* layout chrome */
  --header-h: 64px;
  --stickybar-h: 64px;
}

@media (min-width: 1024px) {
  :root { --header-h: 80px; }
}