/* ============================================================================
   CarportCentral Design System — Tokens (v2.2, 2026-07-29)
   ----------------------------------------------------------------------------
   v2.0 — ALL BLUE REMOVED. Rebuilt on the official brand sheet:
   Poppins, the orange→red ramp, and the two brand greys #808488 / #383739.
   There is no navy, no blue-tinted grey, and no blue-tinted shadow in this
   system. If you are about to add a color whose blue channel exceeds its red
   channel, stop — it does not belong here.

   The brand sheet supplies two greys. A working UI needs about eight steps,
   so the rest are DERIVED on the same hue as #383739 (very slightly warm,
   never blue). Every derived value is marked "derived" below; every value
   taken straight from the sheet is marked "BRAND".

   Drop this into the theme as css/cpc-tokens.css and enqueue it BEFORE any
   page template CSS. Every new/rebuilt page consumes these variables; no page
   should ever hardcode a hex value that exists here.

   Scope note: tokens are declared on :root so they are available everywhere,
   but they only *apply* where a component class uses them. Adding this file
   changes nothing visually on its own — it is safe to ship ahead of any
   template work.

   The `.cpc-scope` half of the selector is NOT redundant. The wp-cta-modal-engine
   plugin declares its own `--cpc-orange` (#f4580d) and `--cpc-muted` (#666666) on
   `:root` and enqueues AFTER the theme, so it wins the source-order tie and
   silently repaints every token consumer. Re-declaring on `.cpc-scope` puts the
   correct values on a nearer ancestor, which custom-property inheritance always
   resolves first regardless of specificity or order. Do not collapse this back
   to a bare `:root`.
   ========================================================================== */

:root,
.cpc-scope {

  /* ---- Brand -----------------------------------------------------------
     #F4580B is NOT a brand-sheet stop, but it is the ratified primary and is
     live on 7,000+ pages, so it stays as the fill. Hover and text values come
     straight off the sheet's ramp. Keep the fill/text split: #F4580B on white
     is 3.36:1 and fails AA as text, which is exactly what --cpc-orange-ink
     (5.51:1) exists to solve. Never set orange text to --cpc-orange.
     --------------------------------------------------------------------- */
  --cpc-orange:        #F4580B;  /* fills: buttons, icon boxes, accents      */
  --cpc-orange-hover:  #CB4F28;  /* BRAND — hover fill on --cpc-orange       */
  --cpc-orange-ink:    #BC3C26;  /* BRAND — orange TEXT/links on light (AA)  */
  --cpc-orange-tint:   #FEEFE7;  /* pill bg, icon-box bg, focus ring halo    */
  --cpc-orange-dark:   #FF8A5C;  /* derived — orange accent ON dark (5.1:1)  */

  /* Full brand ramp, available for gradients and multi-stop treatments */
  --cpc-ramp-1:        #E97525;  /* BRAND */
  --cpc-ramp-2:        #D96127;  /* BRAND */
  --cpc-ramp-3:        #CB4F28;  /* BRAND */
  --cpc-ramp-4:        #BC3C26;  /* BRAND */
  --cpc-ramp-5:        #AD2926;  /* BRAND */

  /* ---- Dark surfaces (neutral grey — NO navy) --------------------------- */
  --cpc-dark:          #383739;  /* BRAND — solid bands, card heads, footers */
  --cpc-dark-2:        #4A484B;  /* derived — gradient partner, raised panel */
  --cpc-dark-deep:     #1A191B;  /* derived — FULL-BLEED heroes + CTA bands  */
  --cpc-dark-scrim:    rgba(26,25,27,.80);   /* photo hero overlay           */
  --cpc-dark-line:     rgba(255,255,255,.15);/* dividers on dark             */
  --cpc-dark-grid:     rgba(255,255,255,.045);/* blueprint hero, fine grid   */
  --cpc-dark-grid-2:   rgba(255,255,255,.08); /* blueprint hero, major grid  */

  /* ---- Light surfaces (neutral — NO cool/blue tint) --------------------- */
  --cpc-ground:        #FFFFFF;  /* default page background                  */
  --cpc-tint:          #F6F6F7;  /* derived — alternating section band       */
  --cpc-tint-2:        #EDEDEE;  /* derived — nested panel, table stripe     */
  --cpc-line:          #E2E2E3;  /* derived — all borders on light           */
  --cpc-line-strong:   #C9C9CB;  /* derived — card hover, open accordion     */

  /* ---- Ink (neutral greys — NO navy tint) ------------------------------- */
  --cpc-ink:           #383739;  /* BRAND — headings + primary body          */
  --cpc-ink-2:         #5C5A5E;  /* derived — secondary body, card desc      */
  --cpc-muted:         #808488;  /* BRAND — captions, helper text, labels    */

  /* ---- Ink on dark ------------------------------------------------------ */
  --cpc-on-dark:       #FFFFFF;  /* headings on dark                         */
  --cpc-on-dark-body:  #D6D5D7;  /* derived — body copy on dark              */
  --cpc-on-dark-muted: #A8A7AA;  /* derived — captions on dark               */

  /* ---- Semantic --------------------------------------------------------- */
  --cpc-go:            #137A45;  /* success / in-stock / open                */
  --cpc-go-tint:       #E4F4EC;
  --cpc-warn:          #8A5300;
  --cpc-warn-tint:     #FFF4E5;
  --cpc-error:         #B3261E;  /* form validation                          */
  --cpc-error-tint:    #FDECEA;

  /* ---- Layout ----------------------------------------------------------- */
  --cpc-maxw:          1180px;
  --cpc-gutter:        clamp(20px, 5vw, 48px);
  --cpc-section:       clamp(56px, 7vw, 96px);   /* section padding-block    */
  --cpc-section-sm:    clamp(36px, 5vw, 60px);   /* compact bands            */
  --cpc-hero-top:      clamp(112px, 14vh, 168px);/* clears the fixed header  */

  /* ---- Gaps ------------------------------------------------------------- */
  --cpc-gap-card:      20px;
  --cpc-gap-tight:     12px;
  --cpc-gap-col:       clamp(2rem, 5vw, 4rem);   /* two-column layouts       */

  /* ---- Radius ----------------------------------------------------------- */
  --cpc-r-xs:          6px;    /* chips, tiny controls                       */
  --cpc-r-sm:          8px;    /* inputs, small buttons                      */
  --cpc-r:             10px;   /* standard buttons                           */
  --cpc-r-md:          12px;   /* cards, panels, accordions                  */
  --cpc-r-lg:          20px;   /* hero form cards, feature panels            */
  --cpc-r-pill:        100px;  /* pills, badges                              */

  /* ---- Shadows (neutral grey tint — v1.0 used a navy tint) -------------- */
  --cpc-shadow-sm:     0 1px 2px rgba(56,55,57,.06), 0 2px 8px rgba(56,55,57,.05);
  --cpc-shadow-md:     0 8px 22px rgba(56,55,57,.10), 0 2px 6px rgba(56,55,57,.06);
  --cpc-shadow-lg:     0 24px 60px rgba(56,55,57,.18), 0 6px 18px rgba(56,55,57,.10);
  --cpc-shadow-cta:    0 6px 18px -8px rgba(244,88,11,.7);   /* orange glow  */

  /* ---- Motion ----------------------------------------------------------- */
  --cpc-t-state:       .15s ease;  /* color, background, border             */
  --cpc-t-lift:        .18s ease;  /* transform on cards/buttons            */
  --cpc-t-media:       .3s ease;   /* image zoom                            */

  /* ---- Z-index (7 steps — never invent a new value) --------------------- */
  --cpc-z-content:     1;
  --cpc-z-sticky:      10;   /* in-page sticky sub-nav                       */
  --cpc-z-promo:       20;   /* promo / offer bar                            */
  --cpc-z-header:      50;   /* site header                                  */
  --cpc-z-overlay:     100;  /* modal backdrop, spotlight scrim              */
  --cpc-z-modal:       110;
  --cpc-z-toast:       120;

  /* ---- Type ------------------------------------------------------------- */
  --cpc-font:          'Poppins', sans-serif;
  --cpc-font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --cpc-body:          17px;
  --cpc-body-lh:       1.62;
  --cpc-h1:            clamp(2rem, 4.6vw, 3.1rem);
  --cpc-h2:            clamp(1.6rem, 3.4vw, 2.4rem);
  --cpc-h3:            clamp(1.15rem, 1.9vw, 1.4rem);

  /* ---- DEPRECATED v1.0 aliases -----------------------------------------
     Kept so any stylesheet still referencing the navy tokens degrades to the
     neutral equivalent instead of falling back to an unstyled value. Do not
     use these in new code; they will be deleted once no consumer remains.
     --------------------------------------------------------------------- */
  --cpc-navy:          var(--cpc-dark);
  --cpc-navy-2:        var(--cpc-dark-2);
  --cpc-navy-3:        var(--cpc-dark-2);
  --cpc-navy-line:     var(--cpc-dark-line);
  --cpc-navy-grid:     var(--cpc-dark-grid);
  --cpc-navy-grid-2:   var(--cpc-dark-grid-2);
}

/* ============================================================================
   Global motion kill-switch. Required on every page — not optional.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cpc-scope *,
  .cpc-scope *::before,
  .cpc-scope *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}