/* ============================================================
   Kry UI — SEMANTIC layer
   Role-based colors that compose foundation HSL primitives.
   Components use these (--bg, --primary) NOT raw HSL values.
   v0.4 — 2026-05-20
   ============================================================ */

@import url('./foundation.css');

:root {
  /* ============ PRIMARY (brand-driven) ============
     v0.4.1 (2026-05-20) — HSL math hardened against L ∈ [20%,70%], S ∈ [10%,90%].
       Previous unbounded calc() let primary-soft hit L=85% (invisible on warm-bg L=96%)
       and primary-on hardcoded white failed WCAG AA on light primaries (BetterBuy 2.9:1).
       Fix strategy:
         - clamp() lightness for soft/bg variants → ceiling 82% so chip vs warm-bg keeps ≥14% L delta
         - primary-on uses CSS relative color syntax → flips to dark text when primary L ≥ 50%
         - accent-deep caps S at 70% to prevent neon when L is also deep
       Backwards compat: brands with primary L ≤ 55% (annhien, khi, xanh, a-kryphan, haogood)
       compute identical values as before. Only L ≥ 60% brands (BetterBuy, AI Tools) clamp. */
  --primary:           hsl(var(--brand-primary-h) var(--brand-primary-s) var(--brand-primary-l));
  --primary-deep:      hsl(var(--brand-primary-h) var(--brand-primary-s) calc(var(--brand-primary-l) - 10%));
  --primary-hover:     hsl(var(--brand-primary-h) var(--brand-primary-s) calc(var(--brand-primary-l) - 5%));
  --primary-active:    hsl(var(--brand-primary-h) var(--brand-primary-s) calc(var(--brand-primary-l) - 15%));
  --primary-soft:      hsl(var(--brand-primary-h) var(--brand-primary-s) clamp(45%, calc(var(--brand-primary-l) + 25%), 82%));
  --primary-bg:        hsl(var(--brand-primary-h) var(--brand-primary-s) clamp(50%, calc(var(--brand-primary-l) + 30%), 85%) / 0.15);
  --primary-ring:      hsl(var(--brand-primary-h) var(--brand-primary-s) var(--brand-primary-l) / 0.3);
  /* --primary-on — text color on top of --primary fills.
     v0.4.2 (2026-05-20): replaced sign()-based auto-flip math (Chrome resolves CSS
     `sign()` inside hsl() calc to 0 → result hsl(0 0% 50%) grey → falls back to
     parent --text). Now default = white (works for any brand with primary L ≤ 50%).
     Brands with primary L > 50% MUST override --primary-on in their brand.css to
     dark text (e.g. hsl(0 0% 15%)). See brands/_template.brand.css. */
  --primary-on:        hsl(0 0% 100%);

  /* ============ ACCENT ============
     accent-deep clamps S ≤ 70% to prevent neon (AI Tools cyan 80% S on cream landing). */
  --accent:            hsl(var(--brand-accent-h) var(--brand-accent-s) var(--brand-accent-l));
  --accent-deep:       hsl(var(--brand-accent-h) min(var(--brand-accent-s), 70%) calc(var(--brand-accent-l) - 10%));
  --accent-soft:       hsl(var(--brand-accent-h) var(--brand-accent-s) clamp(45%, calc(var(--brand-accent-l) + 25%), 85%));

  --highlight:         hsl(var(--brand-highlight-h) var(--brand-highlight-s) var(--brand-highlight-l));
  --highlight-soft:    hsl(var(--brand-highlight-h) var(--brand-highlight-s) calc(var(--brand-highlight-l) + 15%));

  /* ============ STATUS ============
     v0.4.2 (2026-05-20): --*-soft alpha reduced 0.3 → 0.2 so text-on-soft (badge/helper)
     passes AA when foundation status-l is tight (27-44). Soft bg stays visually subtle. */
  --success:           hsl(var(--status-success-h) var(--status-success-s) var(--status-success-l));
  --success-soft:      hsl(var(--status-success-h) var(--status-success-s) calc(var(--status-success-l) + 40%) / 0.2);
  --success-on:        hsl(0 0% 100%);

  --danger:            hsl(var(--status-danger-h) var(--status-danger-s) var(--status-danger-l));
  --danger-soft:       hsl(var(--status-danger-h) var(--status-danger-s) calc(var(--status-danger-l) + 25%) / 0.2);
  --danger-on:         hsl(0 0% 100%);

  --warning:           hsl(var(--status-warning-h) var(--status-warning-s) var(--status-warning-l));
  --warning-soft:      hsl(var(--status-warning-h) var(--status-warning-s) calc(var(--status-warning-l) + 35%) / 0.2);

  --info:              hsl(var(--status-info-h) var(--status-info-s) var(--status-info-l));
  --info-soft:         hsl(var(--status-info-h) var(--status-info-s) calc(var(--status-info-l) + 30%) / 0.2);

  /* ============ WARM AESTHETIC SEMANTIC ============ */
  --warm-bg:           hsl(var(--warm-bg-h) var(--warm-bg-s) var(--warm-bg-l));
  --warm-surface:      hsl(var(--warm-bg-h) var(--warm-bg-s) var(--warm-surface-l));
  --warm-surface-2:    hsl(var(--warm-bg-h) var(--warm-bg-s) var(--warm-surface2-l));
  --warm-border:       hsl(var(--warm-bg-h) var(--warm-bg-s) var(--warm-border-l));
  --warm-rule:         hsl(var(--warm-bg-h) var(--warm-bg-s) var(--warm-rule-l));

  --warm-text:         hsl(var(--neutral-h) var(--neutral-s) var(--warm-ink-l));
  --warm-text-2:       hsl(var(--neutral-h) var(--neutral-s) var(--warm-ink-2-l));
  --warm-text-3:       hsl(var(--neutral-h) var(--neutral-s) var(--warm-ink-3-l));

  /* ============ DARK AESTHETIC SEMANTIC ============ */
  --dark-bg:           hsl(var(--dark-bg-h) var(--dark-bg-s) var(--dark-bg-l));
  --dark-surface:      hsl(var(--dark-bg-h) var(--dark-bg-s) var(--dark-surface-l));
  --dark-surface-2:    hsl(var(--dark-bg-h) var(--dark-bg-s) var(--dark-surface2-l));
  --dark-sidebar:      hsl(var(--dark-bg-h) var(--dark-bg-s) var(--dark-sidebar-l));
  --dark-border:       hsl(var(--dark-bg-h) var(--dark-bg-s) var(--dark-border-l));
  --dark-border-soft:  hsl(var(--dark-bg-h) var(--dark-bg-s) var(--dark-border-soft-l));

  --dark-text:         hsl(var(--dark-text-h) var(--dark-text-s) var(--dark-text-l));
  --dark-text-2:       hsl(var(--dark-text-h) var(--dark-text-s) var(--dark-text-2-l));
  --dark-text-3:       hsl(var(--dark-text-h) var(--dark-text-s) var(--dark-text-3-l));

  --dark-violet:       hsl(var(--dark-violet-h) var(--dark-violet-s) var(--dark-violet-l));
  --dark-violet-soft:  hsl(var(--dark-violet-h) var(--dark-violet-s) var(--dark-violet-l) / 0.15);
  --dark-cyan:         hsl(var(--dark-cyan-h) var(--dark-cyan-s) var(--dark-cyan-l));
  --dark-cyan-soft:    hsl(var(--dark-cyan-h) var(--dark-cyan-s) var(--dark-cyan-l) / 0.15);
  --dark-emerald:      hsl(var(--dark-emerald-h) var(--dark-emerald-s) var(--dark-emerald-l));
  --dark-emerald-soft: hsl(var(--dark-emerald-h) var(--dark-emerald-s) var(--dark-emerald-l) / 0.15);
  --dark-amber:        hsl(var(--dark-amber-h) var(--dark-amber-s) var(--dark-amber-l));
  --dark-amber-soft:   hsl(var(--dark-amber-h) var(--dark-amber-s) var(--dark-amber-l) / 0.15);
  --dark-danger:       hsl(var(--dark-danger-h) var(--dark-danger-s) var(--dark-danger-l));
  --dark-danger-soft:  hsl(var(--dark-danger-h) var(--dark-danger-s) var(--dark-danger-l) / 0.15);

  /* ============ SHADOW (warm = soft, dark = glow) ============ */
  --shadow-xs:  0 1px 2px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.04);
  --shadow-sm:  0 2px 4px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.05), 0 1px 2px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.04);
  --shadow-md:  0 4px 12px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.06), 0 2px 4px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.04);
  --shadow-lg:  0 8px 24px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.08), 0 4px 8px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.04);
  --shadow-xl:  0 16px 48px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.10), 0 6px 16px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.06);
  --shadow-2xl: 0 24px 64px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.14), 0 8px 24px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.08);

  --glow-primary:  0 0 0 1px var(--primary-ring), 0 6px 20px hsl(var(--brand-primary-h) var(--brand-primary-s) var(--brand-primary-l) / 0.3);
  --glow-violet:   0 0 0 1px hsl(var(--dark-violet-h) var(--dark-violet-s) var(--dark-violet-l) / 0.4), 0 6px 20px hsl(var(--dark-violet-h) var(--dark-violet-s) var(--dark-violet-l) / 0.3);
  --glow-emerald:  0 0 0 1px hsl(var(--dark-emerald-h) var(--dark-emerald-s) var(--dark-emerald-l) / 0.4), 0 6px 20px hsl(var(--dark-emerald-h) var(--dark-emerald-s) var(--dark-emerald-l) / 0.3);

  /* ============ ELEVATION SYSTEM ============ */
  /* Composed = subtle border + layered shadow for depth perception.
     Use case mapping:
       0 = flat content
       1 = list row hover, ghost button hover
       2 = card default, button raised
       3 = dropdown, popover, tooltip
       4 = modal, drawer
       5 = command palette, toast (highest) */
  --elevation-0: none;
  --elevation-1:
    0 1px 0 hsl(var(--neutral-h) var(--neutral-s) 20% / 0.04) inset,
    0 1px 2px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.05);
  --elevation-2:
    0 1px 0 hsl(var(--neutral-h) var(--neutral-s) 100% / 0.5) inset,
    0 2px 4px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.06),
    0 1px 2px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.04);
  --elevation-3:
    0 4px 12px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.08),
    0 2px 4px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.04);
  --elevation-4:
    0 12px 32px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.12),
    0 4px 8px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.06);
  --elevation-5:
    0 24px 64px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.16),
    0 8px 24px hsl(var(--neutral-h) var(--neutral-s) 20% / 0.08);
}

/* ============================================================
   AESTHETIC MODE — apply class to <body> or root container
   ============================================================ */

.aesthetic-warm {
  --bg:           var(--warm-bg);
  --surface:      var(--warm-surface);
  --surface-2:    var(--warm-surface-2);
  --border:       var(--warm-border);
  --rule:         var(--warm-rule);
  --text:         var(--warm-text);
  --text-2:       var(--warm-text-2);
  --text-3:       var(--warm-text-3);
  --text-on-primary: var(--primary-on);
  --shadow:       var(--shadow-md);
  --shadow-lg-alias: var(--shadow-lg);
  color: var(--text);
  background: var(--bg);
  /* color-scheme hint: tells UA to render form controls / scrollbar
     in light mode (matches warm cream surface). Iter 5 B (2026-05-20). */
  color-scheme: light;
}

.aesthetic-dark {
  --bg:           var(--dark-bg);
  --surface:      var(--dark-surface);
  --surface-2:    var(--dark-surface-2);
  --border:       var(--dark-border);
  --rule:         var(--dark-border);
  --text:         var(--dark-text);
  --text-2:       var(--dark-text-2);
  --text-3:       var(--dark-text-3);
  --text-on-primary: var(--primary-on);
  --shadow:       var(--shadow-md);
  --shadow-lg-alias: var(--shadow-lg);
  color: var(--text);
  background: var(--bg);
  /* color-scheme hint: tells UA to render form controls / scrollbar
     in dark mode (matches near-black surface). Iter 5 B (2026-05-20). */
  color-scheme: dark;
}

/* ============================================================
   KEYBOARD FOCUS — global :focus-visible (Iter 5 A, 2026-05-20)
   Every interactive must show a visible focus ring when reached via
   keyboard. We expose --focus-ring token so brand presets / dark mode
   can tune contrast. Default uses --primary at 0.6 alpha → readable on
   both warm cream + near-black dark surfaces.
   Rules:
     1. *:focus-visible           → 2px outline + 2px offset
     2. *:focus:not(:focus-visible) → no outline (kills sticky default on click)
     3. .skip-link                → hidden until focused (a11y best practice)
   ============================================================ */

:root {
  --focus-ring: hsl(var(--brand-primary-h) var(--brand-primary-s) var(--brand-primary-l) / 0.65);
  --focus-ring-offset: 2px;
  --focus-ring-width: 2px;
}

.aesthetic-dark {
  /* On dark surfaces, full-saturation primary may bloom. Bump alpha
     for crisper edge against near-black bg. */
  --focus-ring: hsl(var(--brand-primary-h) var(--brand-primary-s) calc(var(--brand-primary-l) + 15%) / 0.85);
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 2px;
}

/* Kill default browser outline on mouse click but PRESERVE keyboard outline.
   Modern browsers handle this automatically — this is a hard backstop for
   legacy components that set `outline: none` then forgot to add a replacement. */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Skip link — visually hidden until focused via Tab.
   Renders at top-left of viewport once focused. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--primary);
  color: var(--primary-on);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  transform: translateY(-110%);
  transition: transform 150ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: 2px;
}

/* ============================================================
   MESH UTILITIES — use everywhere
   ============================================================ */

/* Brand-relative mesh layers — gradients that follow brand-primary/accent/highlight
   hue instead of fixed coral palette. Fallback chain: accent → primary, highlight → primary.
   Use for editorial / deck backgrounds that must swap with brand. */
:root {
  --brand-mesh-1: radial-gradient(
    ellipse 60% 40% at 30% 20%,
    hsl(var(--brand-primary-h) var(--brand-primary-s) 70% / 0.12) 0%,
    transparent 60%
  );
  --brand-mesh-2: radial-gradient(
    ellipse 40% 60% at 80% 70%,
    hsl(var(--brand-accent-h, var(--brand-primary-h)) var(--brand-accent-s, 50%) 65% / 0.10) 0%,
    transparent 65%
  );
  --brand-mesh-3: radial-gradient(
    ellipse 50% 50% at 50% 90%,
    hsl(var(--brand-highlight-h, var(--brand-primary-h)) 60% 75% / 0.08) 0%,
    transparent 70%
  );
}

.mesh-warm {
  background-color: var(--warm-bg);
  background-image:
    radial-gradient(at 8% 12%,  hsl(var(--mesh-warm-1-h) 90% 78% / 0.55) 0px, transparent 50%),
    radial-gradient(at 88% 8%,  hsl(var(--mesh-warm-2-h) 70% 82% / 0.50) 0px, transparent 50%),
    radial-gradient(at 92% 72%, hsl(var(--mesh-warm-3-h) 85% 75% / 0.50) 0px, transparent 50%),
    radial-gradient(at 12% 88%, hsl(var(--mesh-warm-4-h) 30% 78% / 0.45) 0px, transparent 50%);
}

.mesh-warm-subtle {
  background-color: var(--warm-bg);
  background-image:
    radial-gradient(at 8% 12%,  hsl(var(--mesh-warm-1-h) 90% 78% / 0.25) 0px, transparent 50%),
    radial-gradient(at 92% 88%, hsl(var(--mesh-warm-3-h) 85% 75% / 0.25) 0px, transparent 50%);
}

.mesh-dark {
  background-color: var(--dark-bg);
  background-image:
    radial-gradient(at 15% 22%, hsl(var(--mesh-dark-1-h) 85% 55% / 0.32) 0px, transparent 50%),
    radial-gradient(at 78% 18%, hsl(var(--mesh-dark-2-h) 92% 55% / 0.22) 0px, transparent 50%),
    radial-gradient(at 88% 78%, hsl(var(--mesh-dark-3-h) 88% 50% / 0.18) 0px, transparent 50%),
    radial-gradient(at 20% 85%, hsl(var(--mesh-dark-4-h) 80% 45% / 0.22) 0px, transparent 50%);
}

.mesh-dark-subtle {
  background-color: var(--dark-bg);
  background-image:
    radial-gradient(at 15% 22%, hsl(var(--mesh-dark-1-h) 85% 55% / 0.15) 0px, transparent 50%),
    radial-gradient(at 85% 78%, hsl(var(--mesh-dark-3-h) 88% 50% / 0.10) 0px, transparent 50%);
}

.grid-lines-dark {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 40px 40px;
}

.tab-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   RESPONSIVE GUARD — mobile overflow fix (Iteration 3 P1, BUG-002)
   v0.4.1 — 2026-05-20
   Scope: viewport ≤ 480px ONLY. Desktop/tablet untouched.
   Strategy:
     PR1 — Body padding ramp: caps hardcoded `padding: 32px 24px` / `80px 24px`
           down to 16px on mobile (chrome eat ~64-160px → ~32px)
     PR2 — Card padding cap: caps `padding: var(--space-10)` (40px) cards
           down to var(--space-6) (24px) on mobile
     PR3 — Universal overflow-x clip + long-string break

   Audit ref: _screenshots/_mobile-overflow-AUDIT.md
   Note on !important: tokens layer loads before per-block styles, so
   without !important the per-block hardcoded padding wins. Audit
   explicitly accepted !important as scope-bounded by @media query.
   ============================================================ */

@media (max-width: 480px) {
  /* PR1 — body padding cap. Affects 18 blocks declaring `body { padding: 32px 24px }` or `padding: 80px 24px`. */
  body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* PR1.b — page wrap/container side padding cap (testimonials, footer, hero use wider .wrap) */
  .wrap,
  .container,
  .demo-wrap,
  .page-wrap {
    padding-left: max(0px, env(safe-area-inset-left)) !important;
    padding-right: max(0px, env(safe-area-inset-right)) !important;
    max-width: 100% !important;
  }

  /* PR2 — card padding cap. Affects 14 blocks using `.card { padding: var(--space-10) }` (40px). */
  .card,
  .panel-card,
  .stage {
    padding: var(--space-6) !important; /* 24px instead of 40px */
  }

  /* PR3.a — REMOVED (Iter4 B3, 2026-05-20):
     `overflow-x: clip` on body was MASKING real element overflow during
     scan-based audits (rect.right > 375 hidden from scrollWidth metric).
     Re-introduced false-pass states. Per-block fixes (min-width:0, padding
     caps, etc.) now own the responsibility of preventing element bleed.
     Keeping max-width on html only for safety. */
  html { max-width: 100vw; }

  /* PR3.b — long unbreakable strings (IDs, emails, codes) wrap on mobile. */
  pre, code, kbd, .mono, .kbd, .id, .email {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* ============================================================
   REDUCED MOTION — respect prefers-reduced-motion: reduce
   Iter 5 B — 2026-05-20
   Short-circuits ALL CSS animations / transitions / smooth scroll
   for users with vestibular sensitivity or motion preference.
   Scope: universal selector so it cascades over per-block rules
   (animations live in 30+ block files, single override at tokens
   layer is the only sustainable approach).
   ============================================================ */

@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;
  }
}

/* ============================================================
   FORCED COLORS — Windows High Contrast mode (Iter 10 I, 2026-05-20)
   When OS forces system colors (Windows High Contrast, Edge "use system
   colors"), browsers replace most colors with system tokens (CanvasText,
   Canvas, ButtonText, LinkText, etc.). Brand HSL math becomes invisible.
   Strategy:
     1. Map semantic tokens to system colors so components inherit correctly
     2. Force visible focus outline (CanvasText always contrasts Canvas)
     3. Ensure buttons keep border even if bg disappears (icon-only buttons
        would otherwise blend into Canvas)
     4. forced-color-adjust: auto is the default — we let UA override colors
        but lock structural decisions (border presence, outline width)
   Reference: MDN forced-colors, Microsoft Edge accessibility docs.
   ============================================================ */

@media (forced-colors: active) {
  :root {
    --primary:        CanvasText;
    --primary-on:     Canvas;
    --primary-hover:  CanvasText;
    --primary-active: CanvasText;
    --primary-soft:   Canvas;
    --primary-bg:     Canvas;
    --primary-ring:   CanvasText;
    --accent:         CanvasText;
    --accent-deep:    CanvasText;
    --accent-soft:    Canvas;
    --bg:             Canvas;
    --surface:        Canvas;
    --surface-2:      Canvas;
    --border:         CanvasText;
    --rule:           CanvasText;
    --text:           CanvasText;
    --text-2:         CanvasText;
    --text-3:         CanvasText;
    --focus-ring:     CanvasText;
  }

  /* Focus ring must always be visible — system color, no alpha. */
  :focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px !important;
  }

  /* Buttons get visible border so icon-only / ghost variants don't vanish
     into Canvas. ButtonText is system token that always contrasts ButtonFace. */
  button,
  .button,
  .btn,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    border: 1px solid ButtonText !important;
  }

  /* Links use LinkText system color for proper visited/active state. */
  a {
    color: LinkText;
  }
  a:visited {
    color: VisitedText;
  }
}

/* ============================================================
   REDUCED DATA — prefers-reduced-data: reduce (Iter 10 I, 2026-05-20)
   User opted into data-saver (Chrome Lite mode, Edge efficiency mode,
   slow-connection auto-detect). Skip decorative gradients + non-critical
   imagery to save bandwidth + render time. Content stays intact.
   Scope: only `[class*="gradient"]`, `.hero-gradient`, `.blur-bg`, mesh
   utilities, and `[data-decorative]` images. Real content NOT affected.
   ============================================================ */

@media (prefers-reduced-data: reduce) {
  /* Skip decorative gradient backgrounds — collapse to flat surface. */
  .hero-gradient,
  .blur-bg,
  [class*="gradient-bg"],
  .mesh-warm,
  .mesh-warm-subtle,
  .mesh-dark,
  .mesh-dark-subtle,
  .grid-lines-dark {
    background-image: none !important;
  }

  /* Hide decorative images explicitly marked. */
  img[data-decorative="true"],
  .decorative-img,
  .hero-img-decorative {
    display: none !important;
  }

  /* Disable expensive filters that force GPU compositing. */
  [class*="blur"],
  .glass,
  .frosted {
    backdrop-filter: none !important;
    filter: none !important;
  }
}

/* ============================================================
   REDUCED TRANSPARENCY — prefers-reduced-transparency: reduce
   Iter 10 I, 2026-05-20
   macOS "Reduce transparency" + iOS / Windows equivalent. User finds
   blur / translucency disorienting or hard to read. Strategy:
     1. Disable backdrop-filter blur globally
     2. Replace translucent surfaces with solid --surface
     3. Bump alpha to 1.0 on rgba/hsla overlay layers via opacity reset
   Scope: opt-in via class hooks (`.glass`, `.frosted`, `[class*="blur"]`).
   Brand mesh gradients stay since they don't use transparency for legibility.
   ============================================================ */

@media (prefers-reduced-transparency: reduce) {
  [class*="blur"],
  .glass,
  .frosted,
  .glassmorphism,
  .backdrop-blur,
  [style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface) !important;
    opacity: 1 !important;
  }

  /* Modal/dialog overlays — keep dim but remove blur. */
  .modal-overlay,
  .dialog-overlay,
  [role="dialog"]::backdrop {
    backdrop-filter: none !important;
    background: hsl(var(--neutral-h) var(--neutral-s) 10% / 0.7) !important;
  }
}

/* ============================================================
   LEGACY ALIASES — backwards compat (Iter 13 P, 2026-05-20)
   Discovered Iter 12 O audit: 148 undefined var refs.
   Strategy A: declare aliases here instead of mass-renaming HTML.
   Use canonical names in NEW code:
     --text / --text-2 / --text-3   (NOT --ink-*)
     --primary / --accent / --highlight  (NOT --coral / --sage / --amber)
     --bg / --surface              (NOT --cream-base / --cream-paper)
   ============================================================ */
:root {
  /* --ink-* → --text-* (36 + 14 + 14 = 64 refs in page-D-editorial) */
  --ink-primary:   var(--text);
  --ink-secondary: var(--text-2);
  --ink-tertiary:  var(--text-3);
  --ink-muted:     var(--text-3);

  /* Editorial palette legacy (13 + 4 + 2 refs in page-D-editorial.html) */
  --coral:       hsl(12 70% 55%);
  --sage:        hsl(140 25% 50%);
  --amber:       hsl(38 60% 60%);
  --cream-base:  hsl(40 30% 96%);
  --cream-paper: hsl(40 30% 92%);

  /* Spacing alias — --space-7 falls between --space-6 (24px) and --space-8 (32px) */
  --space-7: 28px;
}

/* ============================================================
   PRINT STYLESHEET
   Reset dark/colored backgrounds to white, hide nav/interactive
   chrome, expand <details>, show link URLs, avoid breaking cards.
   Iter 12 N — 2026-05-20
   ============================================================ */
@media print {
  /* Reset background dark/colored → white for ink savings + legibility */
  :root,
  body,
  body.aesthetic-warm,
  body.aesthetic-dark {
    --bg: white !important;
    --surface: white !important;
    --surface-2: white !important;
    --text: black !important;
    --text-2: #333 !important;
    --text-3: #666 !important;
    --border: #ccc !important;
    background: white !important;
    color: black !important;
  }

  /* Hide navigation / interactive chrome — printed page doesn't need it */
  nav,
  .nav,
  .navbar,
  .topbar,
  .sidebar,
  .tab-bar,
  .floating,
  .sticky-bottom,
  button.icon-only,
  .skip-link,
  .toggle,
  .switcher,
  [role="tablist"],
  [aria-hidden="true"] {
    display: none !important;
  }

  /* Expand all <details> for printing — user shouldn't lose hidden content */
  details {
    display: block !important;
  }
  details > *:not(summary) {
    display: block !important;
  }
  details[open] > *:not(summary),
  details > summary ~ * {
    display: block !important;
  }

  /* Show link URL after anchor text for external links */
  a[href^="http"]::after,
  a[href^="https"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }
  /* Skip URL print for in-page anchors and mailto/tel links */
  a[href^="#"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after {
    content: "" !important;
  }

  /* Avoid page break inside cards / sections / figures */
  .card,
  .kpi-card,
  section,
  article,
  figure,
  blockquote,
  pre,
  table {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Headings shouldn't be orphaned at page bottom */
  h1, h2, h3, h4, h5, h6 {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Force black text on color-tinted elements for print clarity */
  .eyebrow,
  .primary,
  .text-primary,
  .text-accent,
  [class*="text-violet"],
  [class*="text-cyan"],
  [class*="text-emerald"] {
    color: black !important;
  }

  /* Hide visual decoration — gradients/meshes/blurs don't print well */
  .mesh-warm,
  .mesh-dark,
  [class*="gradient"],
  .blur-bg,
  [class*="backdrop-blur"] {
    background-image: none !important;
    backdrop-filter: none !important;
  }

  /* Page margin — 1cm gives breathing room on A4 */
  @page {
    margin: 1cm;
  }
}

/* ============================================================
   REDUCED MOTION — WCAG 2.2 SC 2.3.3 Animation from Interactions
   Respects user OS-level setting; replaces transitions with
   instant snaps and disables non-essential animation. Iter 40A.

   Source: web.dev/articles/prefers-reduced-motion
           w3.org/WAI/WCAG22/Understanding/animation-from-interactions

   Escape hatch: add `.motion-essential` class to elements where
   the animation conveys meaning (e.g. loading spinner, progress
   bar, content-loaded transition). These are exempt per WCAG —
   "unless the animation is essential to the functionality".
   ============================================================ */
@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;
  }

  /* Restore EXPLICIT essential transitions only when marked via class.
     Example: `<div class="spinner motion-essential">` preserves rotation. */
  .motion-essential,
  .motion-essential *,
  .motion-essential *::before,
  .motion-essential *::after {
    animation-duration: revert !important;
    animation-iteration-count: revert !important;
    transition-duration: revert !important;
  }
}