/**
 * SyteWide 2026 revamp — design tokens (P2 aesthetic).
 * Source of truth. Mirrored into Elementor Global Kit via MCP (M1.4 / M1.5).
 * See: docs/developer/design-system/{color-tokens,typography,spacing}.md
 * Spec: docs/developer/design-system/2026-04-24-p2-aesthetic-revamp-design.md
 */

:root {
  /* Light canvas palette */
  --bg:               #FAFAF7;  /* page background (cool off-white) */
  --bg-soft:          #F2F4F7;  /* soft band, stat strip, subtle panel */
  --ink:              #0B1B2B;  /* body text, rules, dark surfaces */
  --mute:             #5A6675;  /* muted copy, metadata */
  --rule:             rgb(11 27 43 / 10%); /* hairline rules */
  --blue:             #1F5F85;  /* primary CTA, deep accent */
  --blue-bright:      #4A9DC8;  /* links, hover, secondary CTA */
  --blue-tint:        #D8ECF6;  /* stat-tile bg, badge bg */

  /* ── Brand system 2026-05-26 — four-brand identity ───────────────── */
  --sw-light: #1E3A8A;  --sw-dark: #5B7CD9;
  --so-light: #0F6F7E;  --so-dark: #2D9CB0;  --so-mist: #E0EEF0;
  --sh-light: #D85A50;  --sh-dark: #E97A6E;  --sh-mist: #FBE9E7;
  --tr-light: #B8862D;  --tr-dark: #DDA94E;  --tr-mist: #F5EBD3;
  /* Per-page accent — overridden by body.sw-product-* (see sytewide-overrides.css). */
  --product-accent: var(--blue-bright);
  /* Brand tokens are FIXED brand hexes (not canvas-relative) — they do NOT flip
     in .sw-dark-twin. Pick --x-dark on dark canvas, --x-light on cream, per use. */

  /* Dark-twin canvas palette retired 2026-05-10 (M4.2 PR-DARK-01 final).
     Per audit Hard Rule #8: dark twins flip shared tokens via .sw-dark-twin
     selector; no parallel --dark-* token set. The 7 dark colors are now
     inlined into the .sw-dark-twin remap rule below; nothing else
     references them. */

  /* Type families — Inter for body + most display. JetBrains Mono retained
     for meta-rows / eyebrows / chips. Fraunces 500 unlocked by M5 (audit/10-
     logo.md) for hero h1 + logo wordmark only; h2/h3 stay Inter. Newsreader
     retired 2026-05-07 per CLAUDE.md hard rule 2 (no italic display). */
  --font-sans:    "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", menlo, monospace;
  --font-display: "Fraunces", Georgia, serif;

  /* Type scale — fluid clamps */
  --size-display:  clamp(56px, 7vw, 96px);
  --size-h1:       clamp(44px, 5.5vw, 72px);
  --size-h2:       clamp(36px, 4.5vw, 52px);
  --size-h3:       clamp(26px, 3vw, 32px);
  --size-body-lg:  20px;
  --size-body:     16px;
  --size-meta:     13px;
  --size-eyebrow:  12px;
  --size-tile:     11px;

  /* Spacing (8px base) */
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8: 128px;
  --section-y: clamp(64px, 8vw, 96px);
  --section-x: clamp(20px, 7vw, 120px);

  /* Updated 2026-05-27: 1238 → 1290 to match practical sitewide canvas
     (.sw-dark-twin .e-con-inner override at sytewide-overrides.css:1852).
     See docs/developer/design-system/widths.md. */
  --container-width: 1290px;

  /* Section width tiers (locked 2026-05-27) — see
     docs/developer/design-system/widths.md + .cursor/rules/site-09. */
  --width-canvas: var(--container-width);  /* cards grids, timelines, hero split, full-feature bands (= --container-width) */
  --width-wide: 880px;                      /* 880 — centered eyebrow+h2+lede heading blocks above grids */
  --width-prose: 720px;                     /* 720 — body prose, centered CTA copy, standalone reading text */
  --width-narrow: 600px;                    /* 600 — tight lede paragraphs under wide heads */

  /* Documented exception — NOT a tier (see widths.md §exceptions) */
  --width-pricing-pair: 1040px;             /* 1040 — 2-col side-by-side pricing layout on product detail pages */

  --hero-y:    clamp(96px, 12vw, 160px);

  /* Mobile-audit operational constants (F3 extraction 2026-05-11) — magic
     numbers from M0.2/M0.5 mobile-audit followups consolidated here so the
     mobile band rhythm can be tuned in one place. */
  --sw-mobile-hero-pt:     48px;  /* sytehero hero baseline (M-022) */
  --sw-mobile-inner-floor: 10px;  /* hero direct-child inner pt/pb (M0.5) */
  --sw-mobile-band-floor:  64px;  /* non-hero band locked clamp floor */

  /* Radii */
  --radius-sm:   6px;   /* cards, inputs, CTAs */
  --radius-md:   8px;   /* modals, overlays */
  --radius-pill: 999px; /* badge chips ONLY */

  /* M0 (2026-05-07 revamp) additions per audit/00-system.md */
  --shadow-card:  0 1px 2px rgb(15 17 21 / 4%), 0 8px 24px rgb(15 17 21 / 6%);
  --focus-ring:   0 0 0 2px var(--bg), 0 0 0 4px var(--blue);
  --ink-700:      #2A2D34;  /* mid-tone ink — body small-text on bg-soft */

  /* M-products-redesign (2026-05-12) additions per
     .agent/specs/2026-05-12-m-products-redesign-design.md § CSS architecture.
     --rule-strong: tile + table border weight; reads at 1px without disappearing
       like --rule does on cream-soft backgrounds.
     --radius-btn: explicit button radius per CLAUDE.md hard rule 6 (4px buttons,
       6px cards). Was previously implicit; making it explicit prevents drift.
     --star-gold: shared star glyph color across testimonials + dashboard reviews. */
  --rule-strong:  rgb(11 27 43 / 18%);
  --radius-btn:   4px;
  --star-gold:    #D49A1B;

  /* --ink-fixed: the dark navy hex that --ink resolves to OUTSIDE
     dark-twin scope. Deliberately NOT redeclared in .sw-dark-twin
     below — this token always means "brand dark navy" regardless of
     canvas. Use for backgrounds that must remain dark even on dark-twin
     surfaces (video wells, decorative dark slabs). Do NOT use for text
     color — text needs the canvas-aware --ink which flips for
     readability. Introduced 2026-05-20 (iter-18i) when reverting the
     testimonial video frame revealed that var(--ink) flipped paper-
     white on the dark-twin home page. */
  --ink-fixed:    #0B1B2B;
}

/* Dark-twin scope — flips default palette semantics on sub-brand surfaces.
   Hex values inlined here per M4.2 PR-DARK-01 final (no parallel --dark-*
   token set per audit Hard Rule #8). To change the dark palette, edit
   these 7 lines + verify on /products/<slug>/ + /about-us/ (if dark-
   canvas) + the .sw-end-cta partial scoped to .sw-dark-twin. */
.sw-dark-twin {
  --bg:               #0A1626;
  --bg-soft:          #132338;
  --ink:              #F5F7FA;
  --mute:             #8B9AAE;
  --rule:             rgb(245 247 250 / 12%);
  --rule-strong:      rgb(245 247 250 / 22%);
  --blue:             #5EA8E3;
  --blue-bright:      #8FC9F7;
  /* --ink-700 default #2A2D34 is mid-tone dark intended for small-text on
     cream bg-soft. On dark canvas where bg-soft is #132338, that resolves
     to dark-on-dark = invisible (WCAG fail 1.32:1). Remap to --ink (paper
     #F5F7FA) so var(--ink-700) text inherits the dark-canvas readable
     paper value. Found via 2026-05-11 WCAG audit on /products/syteops/. */
  --ink-700:          #F5F7FA;
  /* Blocksy parent uses --theme-headings-color (#111518) for h1-h6 by
     default. On dark-twin pages this resolves to dark-on-dark = invisible
     headings. Remap to --ink (paper #F5F7FA) so headings inherit the
     dark-twin text colour. */
  --theme-headings-color: #F5F7FA;
  --theme-text-color:     #F5F7FA;
}

/* Page canvas — all non-sub-brand pages inherit --bg */
body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); }

/* prefers-reduced-motion — honored site-wide for motion gates */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}