/* theme-oxford.css — static Oxford-blue gradient theme for non-React pages.
   Mirrors the Circuit homepage accent system: Oxford accent, diagonal gradient
   on the few accent moments, lightened accent on dark grounds. */
:root {
  --hazard: oklch(0.28 0.09 268);
  --hazard-ink: oklch(0.99 0.005 268);
  --grad-accent: linear-gradient(135deg, color-mix(in oklab, var(--hazard) 86%, white) 0%, var(--hazard) 45%, color-mix(in oklab, var(--hazard) 74%, black) 100%);
  --grad-edge: color-mix(in oklab, var(--hazard) 78%, black);
  --accent-on-dark: color-mix(in oklab, var(--hazard) 55%, white);
}
/* accent moments — CTAs and small registers */
.nav-cta .btn { background: var(--grad-accent); color: var(--hazard-ink); border-color: var(--grad-edge); }
.hero .ctas .btn:first-child { background: var(--grad-accent); color: var(--hazard-ink); border-color: var(--grad-edge); }
.hero .ctas .btn:first-child:hover { filter: brightness(0.96); }
.close-ctas .btn:first-child { background: var(--grad-accent); color: var(--hazard-ink); border-color: var(--grad-edge); }
.close-ctas .btn:first-child:hover { filter: brightness(1.12); }
.sticky-cta .btn { background: var(--grad-accent); color: var(--hazard-ink); border-color: var(--grad-edge); }
.fz-demo, .foot.fz .fz-demo { background: var(--grad-accent); color: var(--hazard-ink); border-color: var(--grad-edge); }
.foot.fz .fz-tick, .fz-tick { background: var(--grad-accent); }
.hc-tick { background: var(--grad-accent); }
.bk-btn.primary { background: var(--grad-accent); border-color: var(--grad-edge); }
.final .row .btn:first-child { background: var(--grad-accent); color: var(--hazard-ink); border-color: var(--grad-edge); }
.final .row .btn:first-child:hover { filter: brightness(1.12); }

.hazard-mark::before { background: var(--grad-accent); }
.pf-hero::before { background: linear-gradient(180deg, color-mix(in oklab, var(--hazard) 86%, white) 0%, var(--hazard) 45%, color-mix(in oklab, var(--hazard) 74%, black) 100%); }
.pf-rollout::before, .pf-int-grid::before { background: var(--grad-accent); }
/* dark grounds — Oxford vanishes on near-black; lift it, hue preserved */

.pf-cell .dot { background: var(--accent-on-dark); }

.pf-roles-mock-row .warn { color: var(--accent-on-dark); }
.pf-roles-mock-row .tag { background: var(--accent-on-dark); color: #0a0a0a; }

/* global header + mega menu on static pages */
.btn-demo { background: var(--grad-accent); color: var(--hazard-ink); }
.btn-demo:hover { background: var(--grad-accent); filter: brightness(0.9); }
.btn-demo-edge { background: var(--ink); }
.mega-feature { background: var(--grad-accent); color: var(--hazard-ink); }
.mega-feature h3 { color: var(--hazard-ink); }
.mega-feature p { color: color-mix(in oklab, var(--hazard-ink) 72%, var(--hazard)); }
.mega-feature .ft-eyebrow { color: color-mix(in oklab, var(--hazard-ink) 80%, var(--hazard)); }

.mega-feature .ft-cta { color: var(--hazard-ink); border-bottom-color: color-mix(in oklab, var(--hazard-ink) 40%, transparent); }
.mega-feature:hover .ft-cta { border-color: var(--hazard-ink); }
.mega-feature:hover { box-shadow: 0 20px 48px -20px color-mix(in oklab, var(--hazard) 50%, transparent); }
.mega-trig.is-open::after { background: var(--accent-on-dark); }
.mega-trig.is-open .mega-trig-tick { border-top-color: var(--accent-on-dark); border-right-color: var(--accent-on-dark); }

.mega-item-title .arr { color: var(--accent-on-dark); }
.mm-module-title .arr { color: var(--accent-on-dark); }
.mm-module-card:hover { border-color: var(--accent-on-dark); }
.mm-module-card:hover .mm-module-ic { color: var(--accent-on-dark); }
/* final CTA section sits on ink — ghost + channels stay as-is, links fine */
/* sticky capsule sits on ink — oxford text vanishes there; white text, lifted dot */