/* ========================================================================
   Patterson Electrical — Design Tokens
   Luxury Marine × Architectural Restraint
   ======================================================================== */

:root {
  /* ---------- Surfaces (90% of site lives here) ---------- */
  --paper:      #F8F5F0;   /* primary background — warm ivory */
  --ivory:      #F0ECE4;   /* secondary surfaces */
  --cream:      #EDE7DC;   /* subtle dividers */
  --white:      #FFFFFF;

  /* ---------- Text ---------- */
  --graphite:   #1E1C1A;   /* primary body — warm near-black */
  --stone:      #7A7470;   /* captions, muted */
  --slate:      #4A4642;   /* secondary text */

  /* ---------- Lines & Borders ---------- */
  --hairline:       #D4CFC8;
  --hairline-soft:  #E5E0D8;

  /* ---------- The single dark moment ---------- */
  --owner-dark:     #002F42;   /* Lürssen petrol navy */
  --owner-dark-2:   #001E2D;
  --owner-text:     #F8F5F0;

  /* ---------- Brand jewellery (use sparingly) ---------- */
  --cyan-jewel: #1FB6E0;
  --lime-jewel: #8DD64A;

  /* ---------- Type ---------- */
  /* Display: Saira Condensed — pairs the bold condensed wordmark in the Patterson logo */
  /* Body: Inter Tight — clean modern sans for paragraphs and UI */
  --display: 'Saira Condensed', 'Oswald', 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif;
  --serif:   'Saira Condensed', 'Oswald', 'Barlow Condensed', 'Helvetica Neue', Arial, sans-serif; /* legacy alias — same family */
  --sans:    'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- Type scale ---------- */
  --t-hero:    clamp(3.25rem, 6.4vw, 6.75rem);   /* 52 → 108px */
  --t-h1:      clamp(2.75rem, 5.2vw, 4.75rem);   /* 44 → 76px */
  --t-h2:      clamp(2rem, 3.8vw, 3.5rem);        /* 32 → 56px */
  --t-h3:      clamp(1.5rem, 2.4vw, 2.25rem);     /* 24 → 36px */
  --t-display: clamp(4rem, 7vw, 6rem);            /* numerals */
  --t-tag:     clamp(1.3rem, 1.8vw, 1.75rem);     /* italic tagline */
  --t-eyebrow: 0.72rem;                            /* 11.5px */
  --t-body:    1.0625rem;                          /* 17px */
  --t-body-lg: 1.1875rem;                          /* 19px */
  --t-caption: 0.8125rem;                          /* 13px */
  --t-button:  0.8125rem;                          /* 13px */

  /* ---------- Spacing scale ---------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;
  --s-11: 10rem;
  --s-12: 14rem;

  /* ---------- Containers ---------- */
  --container:    1280px;
  --container-md: 1080px;
  --container-sm: 760px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --d-fast:      180ms;
  --d-base:      300ms;
  --d-slow:      600ms;
  --d-slower:    900ms;

  /* ---------- Tracking ---------- */
  --track-eyebrow: 0.16em;
  --track-button:  0.12em;
  --track-tight:   -0.01em;

  /* ---------- Radii (almost none) ---------- */
  --r-0: 0;
  --r-1: 1px;
  --r-2: 2px;

  /* ---------- Z-index ---------- */
  --z-nav:    50;
  --z-modal:  60;
  --z-toast:  70;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; --d-slower: 0ms; }
}