/* ============================================================================
   Clearout Crew — Design Tokens
   Single source of truth for CSS Custom Properties.
   Derived verbatim from Book II — Design System (BII), which mandates tokens
   for: Colors, Typography, Spacing, Border Radius, Shadows, Breakpoints,
   Container Widths, and Transition Speeds.

   Values marked "(derived)" are implementation-level values that Book II
   requires be centralized but does not enumerate (e.g., specific shadow and
   transition values). They stay within Book II's principles: subtle depth,
   fast motion, charcoal/white/orange palette. No new colors are introduced;
   derived neutrals and the hover orange are shades of the approved family.

   Load order: this file first, then motion-depth.css, then component CSS.
   In WordPress, mirror these into Kadence Global Styles (see
   ../Kadence/kadence-global-settings.md) so the editor and front end match.
   ========================================================================== */

:root {
  /* --- Brand colors (BII, exact) --------------------------------------- */
  --cc-orange:            #F97316;   /* Accent — icons, highlights, links on dark, focus ring. NOT white-text buttons: white on #F97316 ≈ 2.9:1, FAILS WCAG 2.2 AA — use --cc-orange-cta */
  --cc-charcoal:          #1F2937;   /* Header, footer, primary text, dark sections */
  --cc-white:             #FFFFFF;   /* Background & surfaces (cards, forms) */
  --cc-success:           #16A34A;   /* Positive confirmations */
  --cc-warning:           #F59E0B;   /* Informational notices */
  --cc-error:             #DC2626;   /* Validation errors */

  /* --- Interactive states (derived — shades of the approved family) ----- */
  /* ACCESSIBILITY (WCAG 2.2 AA — mandated by Book II): white text on #F97316 is
     ~2.9:1 and FAILS. Any button/CTA surface carrying white text must use
     --cc-orange-cta (#C2410C, 5.2:1 with white). Keep --cc-orange for accents,
     icons, links on dark, and the focus ring. See
     07 - Implementation/Known Issues.md → "Design system — accessibility finding". */
  --cc-orange-cta:        #C2410C;   /* Primary CTA/button surface — white text passes AA (5.2:1) */
  --cc-orange-cta-hover:  #9A330A;   /* CTA hover (darker) */
  --cc-orange-hover:      #EA580C;   /* Accent / link hover */
  --cc-orange-active:     #C2410C;   /* Pressed state (= CTA base) */
  --cc-orange-tint:       #FFF4ED;   /* Very light orange wash for emphasis panels */

  /* --- Neutral ramp (derived from charcoal/white for layering & borders) - */
  --cc-ink:               #1F2937;   /* = charcoal; body text */
  --cc-ink-muted:         #4B5563;   /* Secondary text */
  --cc-ink-subtle:        #6B7280;   /* Captions, meta */
  --cc-surface:           #FFFFFF;   /* Cards, forms */
  --cc-surface-alt:       #F9FAFB;   /* Alternating/section backgrounds for depth */
  --cc-border:            #E5E7EB;   /* Hairline borders */
  --cc-border-strong:     #D1D5DB;

  /* --- Semantic aliases ------------------------------------------------- */
  --cc-bg:                var(--cc-white);
  --cc-text:              var(--cc-ink);
  --cc-link:              var(--cc-orange-cta);        /* #C2410C — 5.2:1 on white, passes AA (was --cc-orange, ~2.9:1 FAIL) */
  --cc-link-hover:        var(--cc-orange-cta-hover);  /* #9A330A — darker, passes AA */
  --cc-link-on-dark:      var(--cc-orange);            /* #F97316 — links on charcoal (~4.8:1, passes AA) */

  /* --- Typography (BII: Headings = Poppins, Body = Inter) --------------- */
  --cc-font-heading: "Poppins", "Inter", Arial, Helvetica, sans-serif;
  --cc-font-body:    "Inter", "Poppins", Arial, Helvetica, sans-serif;

  --cc-weight-body:      400;
  --cc-weight-medium:    500;
  --cc-weight-heading:   600;
  --cc-weight-heading-strong: 700;

  /* Fluid, mobile-first type scale (min → max across viewport).
     Body 16–18px per BII. One H1 per page. */
  --cc-fs-body:  clamp(1rem, 0.96rem + 0.25vw, 1.125rem);   /* 16 → 18px */
  --cc-fs-small: 0.875rem;                                   /* 14px */
  --cc-fs-h4:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* 18 → 22px */
  --cc-fs-h3:    clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);   /* 22 → 28px */
  --cc-fs-h2:    clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);     /* 28 → 40px */
  --cc-fs-h1:    clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);   /* 34 → 52px */

  --cc-lh-tight:  1.15;   /* headings */
  --cc-lh-body:   1.6;    /* comfortable body reading */

  /* --- Spacing scale (BII approved units: 4 8 16 24 32 48 64 96) -------- */
  --cc-space-4:   0.25rem;   /* 4px  */
  --cc-space-8:   0.5rem;    /* 8px  */
  --cc-space-16:  1rem;      /* 16px */
  --cc-space-24:  1.5rem;    /* 24px */
  --cc-space-32:  2rem;      /* 32px */
  --cc-space-48:  3rem;      /* 48px */
  --cc-space-64:  4rem;      /* 64px */
  --cc-space-96:  6rem;      /* 96px */

  /* --- Border radius (BII: rounded corners) ---------------------------- */
  --cc-radius-sm:   6px;    /* inputs, small chips */
  --cc-radius-md:   10px;   /* buttons */
  --cc-radius-lg:   16px;   /* cards, panels */
  --cc-radius-pill: 9999px; /* sticky bar buttons, tags */

  /* --- Elevation / shadows (derived — subtle depth, per Motion & Depth) - */
  --cc-shadow-xs: 0 1px 2px rgba(31, 41, 55, 0.06);
  --cc-shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.06), 0 1px 3px rgba(31, 41, 55, 0.08);
  --cc-shadow-md: 0 2px 4px rgba(31, 41, 55, 0.06), 0 4px 10px rgba(31, 41, 55, 0.08);
  --cc-shadow-lg: 0 4px 8px rgba(31, 41, 55, 0.06), 0 12px 24px rgba(31, 41, 55, 0.10);
  --cc-shadow-focus: 0 0 0 3px rgba(249, 115, 22, 0.35);   /* focus ring, orange */

  /* --- Layout (BII: max content width 1200px) -------------------------- */
  --cc-container-max: 1200px;
  --cc-content-measure: 72ch;   /* narrower reading width for long-form */
  --cc-headline-measure: 34rem; /* hero/section headline+intro column (composed, not edge-to-edge) */
  --cc-gutter: var(--cc-space-24);

  /* --- Media / imagery (reusable across hero, before/after, coverage) ---
     Reserved photo-panel look: a branded placeholder that holds space for real
     photography so unfinished sections read "awaiting photos", not "broken".
     Colours are shades of the approved charcoal family (BII neutrals) plus the
     accent orange wash — no new palette colours introduced. */
  --cc-photo-ratio: 4 / 3.2;
  --cc-photo-surface:
    radial-gradient(80% 70% at 20% 15%, rgba(249, 115, 22, 0.28), transparent 55%),
    linear-gradient(150deg, #334155, #1F2937 60%, #111827);
  /* Warm brand wash behind hero content — the "Clearout Crew, not stock Kadence" signal. */
  --cc-hero-wash: radial-gradient(120% 90% at 85% -10%, rgba(249, 115, 22, 0.10), transparent 60%);

  /* --- Motion (BII: subtle, fast, never delay interaction) ------------- */
  --cc-transition-fast: 120ms;
  --cc-transition-base: 180ms;
  --cc-transition-slow: 260ms;
  --cc-ease: cubic-bezier(0.2, 0.6, 0.2, 1);   /* gentle ease-out */

  /* --- Z-index scale ---------------------------------------------------- */
  --cc-z-header: 100;
  --cc-z-sticky-bar: 90;
  --cc-z-overlay: 1000;
}

/* Breakpoints are documented here for reference; CSS media queries cannot
   read custom properties, so component CSS hardcodes these same values:
     Mobile   : 0 – 767px      (single column, BII)
     Tablet   : 768 – 1023px   (8-col grid)
     Desktop  : 1024px+        (12-col grid, container 1200px)
*/