/**
 * tokens.css — AUTHORED for Tony's Property Maintenance.
 * Theme mode: ai. Hand-tuned to match the customer-approved preview while
 * keeping the kit's --color-* aliases so base.css and component CSS still work.
 *
 * To change branding: edit the values below; do NOT run scripts/init-site.js
 * (which would overwrite this file). Use `npm run regen-meta` (a focused script
 * we ship for page-meta/sitemap/robots only).
 */
:root {
  /* ── Preview brand tokens (canonical) ── */
  --navy:        #0c2340;
  --navy-deep:   #081a30;
  --blue:        #1c4e80;
  --blue-light:  #e8f0f8;
  --gold:        #f4b400;
  --gold-dark:   #d99e00;

  --gray-900:    #1a1d21;
  --gray-700:    #3f454d;
  --gray-500:    #6b7280;
  --gray-300:    #d6dae0;
  --gray-100:    #f4f6f9;
  --white:       #ffffff;

  --error:       #c0392b;
  --success:     #2e7d32;

  /* ── Kit-compatible aliases (used by base.css, layout.css) ── */
  --color-primary:        var(--navy);
  --color-primary-dark:   var(--navy-deep);
  --color-primary-light:  var(--blue);
  --color-accent:         var(--gold);
  --color-neutral-light:  var(--gray-100);
  --color-neutral-dark:   var(--navy-deep);
  --color-white:          var(--white);
  --color-text:           var(--gray-900);
  --color-text-muted:     var(--gray-500);
  --color-border:         var(--gray-300);

  /* ── Typography (Inter only, self-hosted) ── */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --fs-hero:  clamp(2.3rem, 5.4vw, 4rem);
  --fs-h1:    clamp(2rem, 4vw, 3rem);
  --fs-h2:    clamp(1.8rem, 3.6vw, 2.6rem);
  --fs-h3:    clamp(1.15rem, 2vw, 1.4rem);
  --fs-body:  1rem;

  /* ── Spacing ── */
  --space-sm:      0.75rem;
  --space-md:      1.25rem;
  --space-lg:      2rem;
  --space-xl:      3.5rem;
  --space-section: 6rem;
  --section-pad:   6rem;

  /* ── Sizing & elevation ── */
  --max-width:  1180px;
  --maxw:       1180px;
  --radius:     14px;
  --radius-sm:  9px;
  --shadow-sm:  0 2px 10px rgba(12, 35, 64, 0.06);
  --shadow-md:  0 14px 40px rgba(12, 35, 64, 0.12);
  --nav-height: 76px;
  --nav-h:      76px;
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tighter spacing on tablet / mobile, matching the preview */
@media (max-width: 960px) {
  :root { --space-section: 4rem; --section-pad: 4rem; }
}
@media (max-width: 680px) {
  :root { --space-section: 3.25rem; --section-pad: 3.25rem; }
}