/* ════════════════════════════════════════════
   THE PRODUCT WIZARD — DESIGN TOKENS
   Extracted from brand-system-v2 block 00
   ════════════════════════════════════════════ */

:root {
  /* ── Core Palette ── */
  --deep-cobalt:  #0e1026;
  --charcoal:     #0e1026;
  --ink:          #3d3c38;
  --muted:        #6b6960;
  --faint:        #b8b5ae;
  --border:       #d4d2cc;
  --cream-deep:   #e4e2dc;
  --cream-dark:   #eeedea;
  --cream:        #f5f4f0;
  --white:        #ffffff;

  /* ── Brand Accent ── */
  --cobalt:       #1a47e8;   /* surfaces, fills, borders, marks */
  --cobalt-text:  #4272ff;   /* text contexts — AA 4.53:1 on Dark B */
  --cobalt-mid:   rgba(26,71,232,0.18);
  --cobalt-dim:   rgba(26,71,232,0.1);
  --cobalt-ghost: rgba(26,71,232,0.05);
  --cobalt-border:rgba(26,71,232,0.28);
  --cobalt-light: #e8eefe;

  /* ── Status Signal ── */
  /* The one sanctioned non-cobalt accent. Reserved for success / completed
     confirmation (e.g. a finished step). Never decorative, never a second brand colour. */
  --success:                #35d28a;             /* dot · text · icon */
  --success-surface:        rgba(53,210,138,0.14); /* chip fill on dark surfaces */
  --success-border:         rgba(53,210,138,0.36); /* chip border on dark surfaces */
  --success-surface-strong: rgba(53,210,138,0.18); /* chip fill on light / cobalt surfaces */
  --success-border-strong:  rgba(53,210,138,0.50); /* chip border on light / cobalt surfaces */

  /* ── Typography ── */
  --cormorant: 'Cormorant Garamond', serif;
  --mono:      'DM Mono', monospace;
  --sans:      'DM Sans', sans-serif;
  --cobalt-em-on-dark:#1a47e8;
  --cobalt-em-on-cobalt:#0e1026;

  /* -- Dark Surface: Text (source: cream #f5f4f0) -- */
  --dm-text-1:    rgba(245,244,240,0.92);
  --dm-text-2:    rgba(245,244,240,0.65);
  --dm-text-3:    rgba(245,244,240,0.55);
  --dm-text-sub:  rgba(245,244,240,0.48);
  --dm-text-mute: rgba(245,244,240,0.28);

  /* -- Dark Surface: Elevation (source: cobalt rgba(26,71,232)) -- */
  --surface-base:           rgba(26,71,232,0.06);
  --surface-raised:         rgba(26,71,232,0.09);
  --surface-elevated:       rgba(26,71,232,0.12);
  --surface-accent:         rgba(26,71,232,0.15);
  --surface-inset:          rgba(0,0,0,0.3);

  /* -- Dark Surface: Borders (cream + cobalt) -- */
  --border-ghost:           rgba(245,244,240,0.03);
  --border-subtle:          rgba(245,244,240,0.06);
  --border-default:         rgba(245,244,240,0.10);
  --border-accent:          rgba(26,71,232,0.25);
  --border-accent-strong:   rgba(26,71,232,0.5);

  /* -- Light Surface: Text (source: deep-cobalt #0e1026) -- */
  --lm-text-1:    rgba(14,16,38,0.92);
  --lm-text-2:    rgba(14,16,38,0.65);
  --lm-text-3:    rgba(14,16,38,0.45);
  --lm-text-sub:  #1a47e8;
  --lm-text-mute: rgba(14,16,38,0.18);

  /* -- Light Surface: Elevation -- */
  --lm-surface-base:     #ffffff;
  --lm-surface-raised:   #ffffff;
  --lm-surface-elevated: #ffffff;
  --lm-surface-accent:   #e8eefe;
  --lm-surface-inset:    #eeedea;

  /* -- Light Surface: Borders -- */
  --lm-border-ghost:     rgba(0,0,0,0.03);
  --lm-border-subtle:    #e4e2dc;
  --lm-border-default:   #d4d2cc;
  --lm-border-accent:    rgba(26,71,232,0.25);
  --lm-border-accent-strong: rgba(26,71,232,0.5);

  /* -- Velocity Mark: Trail Tokens (pre-composited, solid fills) -- */
  /* Deep Cobalt surface (cobalt #1a47e8 on #0e1026) */
  --trail-1:           #0e1435;   /* 8% cobalt  */
  --trail-2:           #101948;   /* 18% cobalt */
  --trail-3:           #122369;   /* 35% cobalt */
  --trail-lead:        #1a47e8;   /* 100% cobalt */

  /* Cream surface (cobalt #1a47e8 on #f5f4f0) */
  --trail-cream-1:     #e3e6ef;   /* 8% cobalt  */
  --trail-cream-2:     #cdd4ee;   /* 18% cobalt */
  --trail-cream-3:     #a8b7ed;   /* 35% cobalt */
  --trail-cream-lead:  #1a47e8;   /* 100% cobalt */

  /* Electric Cobalt surface (cream on #1a47e8) */
  --trail-inv-1:       #2b54e8;   /* 8% cream  */
  --trail-inv-2:       #4166e9;   /* 18% cream */
  --trail-inv-3:       #6683ea;   /* 35% cream */
  --trail-inv-lead:    #f5f4f0;   /* 100% cream */

  /* -- Geometric Stroke Scale (brand geometry compositions) -- */
  --geo-ghost:        rgba(26,71,232,0.12);   /* background geometry, grid lines */
  --geo-dim:          rgba(26,71,232,0.18);   /* secondary strokes, supporting geometry */
  --geo-default:      rgba(26,71,232,0.24);   /* card outlines, crosshair lines */
  --geo-bright:       rgba(26,71,232,0.36);   /* primary geometry, trail circles */
  --geo-focal:        #1a47e8;                /* one element per composition — the signal */

  /* -- Photography Treatment (replaces duotone) -- */
  /* Philosophy: enhance the photograph, don't replace its palette.
     Deep cobalt surface bleeds through at 20% (via opacity),
     contrast lift enriches colour, vignette provides text legibility. */
  --photo-opacity:      0.8;
  --photo-filter:       contrast(1.15) brightness(0.92) saturate(1.1);
  --photo-vignette:     radial-gradient(ellipse 70% 60% at center,
                          transparent 0%,
                          rgba(14,16,38,0.15) 50%,
                          rgba(14,16,38,0.55) 80%,
                          rgba(14,16,38,0.80) 100%);
}

/* §17.10 Surface & Depth — Light mode: drop the in-canvas ambient atmosphere
   (full-bleed cobalt glow + dark corner/inner vignette baked into brand-graphic
   SVGs) so they translate clean & flat on the cream canvas — matching the
   container-driven sections (e.g. services accordion). The lit-material content
   (orbs/lines, per-shape rxg-vig on circles) is untouched. Dark mode unaffected. */
#page-iv-lab[data-mode="light"] svg rect[fill="url(#rxg-glow)"],
#page-iv-lab[data-mode="light"] svg rect[fill="url(#rxg-corner)"],
#page-iv-lab[data-mode="light"] svg rect[fill="url(#rxg-vig)"] { display: none; }

/* §17.10 — Light mode: drop the ambient section background glow too. The soft
   cobalt radial reads rich on the dark page but muddy on cream, so light mode
   stays flat. Dark mode keeps the glow. */
#page-iv-lab[data-mode="light"] .hp-sec-glow { display: none; }

/* §17.10 — Light mode: kill the remaining soft cobalt background glows on cream
   (service-hero orbs, tag-card glow, services-grid glow). They read muddy on white. */
#page-iv-lab[data-mode="light"] .al-orb,
#page-iv-lab[data-mode="light"] .al-orb-2,
#page-iv-lab[data-mode="light"] .svc-tcard::before,
#page-iv-lab[data-mode="light"] .so-wrap::before,
#page-iv-lab[data-mode="light"] .ab-founder::before,
#page-iv-lab[data-mode="light"] .cs-wrap::before,
#page-iv-lab[data-mode="light"] .ind-wrap::before,
#page-iv-lab[data-mode="light"] .rf-wrap::before,
#page-iv-lab[data-mode="light"] .ag-case::before,
#page-iv-lab[data-mode="light"] .pb-mega::before,
#page-iv-lab[data-mode="light"] .ag-case-glow,
#page-iv-lab[data-mode="light"] [data-glow] { display: none; }

/* §17.10 — Light mode: flip service-page surfaces that were hard-coded dark.
   Service-hero tab cluster (was rgba(14,16,38,0.32) = muddy grey on cream),
   the "What we help with" chips + their tooltips (were #0f1332 / #0e1430). */
#page-iv-lab[data-mode="light"] .al-services { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
#page-iv-lab[data-mode="light"] .svc-chip { background: #ffffff; border-color: rgba(26,71,232,0.24); }
#page-iv-lab[data-mode="light"] .svc-chip-tip { background: #ffffff; border-color: rgba(26,71,232,0.30); color: rgba(14,16,38,0.88); }
#page-iv-lab[data-mode="light"] .svc-chip-tip::after { border-top-color: #ffffff; }