/* ==========================================================================
   ZircoMedia v2 — light theme
   Loaded AFTER site.css and mockups.css. Inverts the canvas by overriding the
   tokens, then fixes the handful of places that hardcode a dark value.
   Same type, same grid, same components, same violet.
   ========================================================================== */

:root {
  /* Canvas inverts: paper ground, ink type. */
  --bg: #f4f5fa;
  --bg-2: #eceef7;
  --bg-lift: #e3e6f3;
  --paper: #ffffff;
  --paper-2: #f0f2fa;
  --paper-card: #ffffff;

  /* Type. --fg-ink was already the dark-on-light value, reused here. */
  --fg: #14132e;
  --fg-dim: #4a4869;
  /* 4.9:1 even where the hero's violet wash darkens the ground to #dbdce2.
     #66638c measured 4.11:1 there and failed AA at these 11px mono sizes. */
  --fg-mute: #5b5880;

  /* Rules invert too. */
  --rule: rgba(20, 19, 46, .14);
  --rule-soft: rgba(20, 19, 46, .07);
  --rule-ink: rgba(20, 19, 46, .16);
  --rule-ink-soft: rgba(20, 19, 46, .08);

  /* Violet stays the brand, but the bright variant is unreadable on paper:
     #8f79ff is 2.6:1 on #f4f5fa. Small violet text uses the core brand colour,
     which measures 7.1:1. */
  --zm-violet-txt: #4924d4;
}

/* Grain reads as dirt on a light ground. */
body::after { display: none; }

/* --- Header ---------------------------------------------------------------- */
.hdr {
  background:
    radial-gradient(120% 340% at 50% -140%, rgba(73, 36, 212, .10), transparent 60%),
    color-mix(in srgb, var(--bg) 88%, transparent);
}
.hdr--stuck {
  background:
    radial-gradient(120% 340% at 50% -140%, rgba(73, 36, 212, .14), transparent 60%),
    color-mix(in srgb, var(--bg) 95%, transparent);
  box-shadow: 0 12px 34px rgba(20, 19, 46, .10);
}
.hdr::after {
  background: linear-gradient(90deg,
    transparent, rgba(73, 36, 212, .16) 18%, rgba(73, 36, 212, .48) 50%,
    rgba(73, 36, 212, .16) 82%, transparent);
}
.hdr__logo::before { background: radial-gradient(circle, rgba(73, 36, 212, .22), transparent 68%); }

/* --- Ticker ---------------------------------------------------------------- */
.ticker { background: var(--bg-2); }
.ticker a { color: var(--fg-dim); }
.ticker a:hover, .ticker a:focus-visible { color: var(--fg); }

/* --- Mega menu ------------------------------------------------------------- */
.mega {
  background: color-mix(in srgb, #ffffff 96%, transparent);
  box-shadow: 0 24px 60px rgba(20, 19, 46, .16);
}
.mega__link:hover, .mega__link:focus-visible { background: rgba(73, 36, 212, .08); }
.mega__feat {
  background:
    radial-gradient(120% 180% at 8% 0%, rgba(73, 36, 212, .16), transparent 62%),
    rgba(73, 36, 212, .04);
}
.mega__feat svg, .mega__link:hover svg { fill: var(--zm-violet); }

/* --- Mobile nav ------------------------------------------------------------ */
.nav-panel { background: #ffffff; }
.nav-toggle { color: var(--fg); }

/* --- Buttons --------------------------------------------------------------- */
.btn:hover, .btn:focus-visible { box-shadow: 0 8px 22px rgba(73, 36, 212, .28); }
.btn--ghost { color: var(--fg); border-color: var(--rule-ink); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--zm-violet); }

/* --- Hero (no video in v2) ------------------------------------------------- */
/* A quiet paper hero: soft violet wash and a hairline grid instead of footage. */
.scrub, .scrub--hero { height: auto; }
.scrub--hero .scrub__stage {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: visible;
  background:
    radial-gradient(90% 120% at 82% 0%, rgba(73, 36, 212, .12), transparent 62%),
    radial-gradient(70% 100% at 0% 100%, rgba(73, 36, 212, .07), transparent 60%),
    var(--bg);
}
.scrub--hero .scrub__lqip,
.scrub--hero .scrub__poster,
.scrub--hero video,
.scrub--hero .scrub__wash,
.scrub--hero .scrub__veil,
.scrub--hero .scrub__grid,
.scrub--hero .scrub__hud { display: none !important; }
.scrub--hero .scrub__content {
  position: relative;
  min-height: 0;
  padding-block: 3.5rem 2.5rem;
}
.scrub--hero .mast__def,
.scrub--hero .mast__body,
.scrub--hero .mast__meta div,
.scrub--hero .console__status,
.scrub--hero .kicker--sm { text-shadow: none; }
.scrub--hero .mast__meta dd, .scrub--hero .mast__body { color: var(--fg-dim); }
.scrub--hero .marquee { position: relative; background: none; backdrop-filter: none; }

/* --- Mockups --------------------------------------------------------------- */
/* site.css already carries a full light treatment under .section--paper; v2
   applies the same values unconditionally so the components invert wholesale. */
.mk {
  background: #ffffff;
  border-color: var(--rule-ink);
  --mk-line: rgba(20, 19, 46, .11);
  --mk-alt: rgba(20, 19, 46, .025);
  color: var(--fg-ink);
  box-shadow: 0 10px 30px rgba(20, 19, 46, .06);
}
.scrub--hero .mk { background: #ffffff; backdrop-filter: none; box-shadow: 0 14px 40px rgba(20, 19, 46, .10); }
.mk__eyebrow, .mk__count, .mk__note, .mk__filters label,
.tbl thead th, .index__n, .mk__ref, .mk__meta, .mk__kv dt,
.stat__k, .pipe__h, .intg__d, .fb__field label, .fb__empty,
.msg__h, .api__status, .ask__lbl, .scrub__credit { color: var(--fg-ink-dim); }
.mk__filters select, .mk__filters input,
.fb__field input, .fb__field select, .fb__field textarea { background: #fff; color: var(--fg-ink); }
.tbl tbody tr:hover { background: rgba(73, 36, 212, .06); }
.mk__item:hover { background: rgba(73, 36, 212, .05); }
.mk__item[aria-selected='true'] { background: rgba(73, 36, 212, .08); box-shadow: inset 2px 0 0 var(--zm-violet); }
.mk__tab[aria-selected='true'] { color: var(--zm-violet); border-bottom-color: var(--zm-violet); }
.code { background: rgba(20, 19, 46, .04); }
.code .k { color: #4924d4; } .code .s { color: #0f6b45; }
.code .n { color: #8a5a00; } .code .c { color: var(--fg-ink-dim); }
.verb--get { color: #0f6b45; } .verb--post { color: var(--zm-violet); } .verb--del { color: #b02525; }
.pill--ok { color: #10744a; } .pill--warn { color: #8a5a00; }
.pill--bad { color: #b02525; } .pill--info { color: var(--zm-violet); }
.pill--mute { color: var(--fg-ink-dim); }
.pill { background: rgba(255, 255, 255, .8); backdrop-filter: none; }
.tags li { background: rgba(20, 19, 46, .04); border-color: var(--rule-ink); color: var(--fg-ink); }
.num--neg { color: #b02525; }
.spark path { stroke: var(--zm-violet); }
.spark .spark__area { fill: rgba(73, 36, 212, .12); }
.msg--int { background: rgba(255, 196, 107, .14); border-left-color: #8a5a00; }
.figure { background: rgba(255, 255, 255, .7); border-color: var(--rule-ink); }
.deal:hover { background: rgba(73, 36, 212, .08); border-color: var(--zm-violet); }
.fb__chip:hover { background: rgba(73, 36, 212, .08); border-color: var(--zm-violet); color: var(--fg-ink); }
.seg--wrap button { color: var(--fg-ink-dim); }
.seg--wrap button[aria-pressed='true'] { color: #fff; }
.up { color: #10744a; } .down { color: #b02525; }
.dot--idle { background: var(--fg-ink-dim); }

/* Chips sit in their brand colour on paper too. */
.tech li { background: color-mix(in srgb, #ffffff 82%, var(--brand, #4924d4) 12%); color: var(--fg-ink); }
.tech li:hover { background: color-mix(in srgb, #ffffff 70%, var(--brand, #4924d4) 22%); }
.intg__c { background: color-mix(in srgb, #ffffff 88%, var(--brand, #4924d4) 8%); }
.intg__c:hover { background: color-mix(in srgb, #ffffff 78%, var(--brand, #4924d4) 16%); }
.solid::before { background: radial-gradient(circle, rgba(73, 36, 212, .12), transparent 70%); }

/* --- Tooltip --------------------------------------------------------------- */
.tip {
  background: #16144a;
  color: #f4f5fa;
  border-color: rgba(73, 36, 212, .55);
  box-shadow: 0 12px 32px rgba(20, 19, 46, .28);
}
.tip__k { color: #b3a4ff; }

/* --- Forms ----------------------------------------------------------------- */
.field input, .field select, .field textarea {
  background: #ffffff;
  border-color: var(--rule-ink);
  color: var(--fg-ink);
}
.card { border-color: var(--rule-ink); background: #ffffff; }
.link-lg { color: var(--fg-ink); border-bottom-color: var(--zm-violet); }
.link-lg:hover { color: var(--zm-violet); }

/* --- Footer ---------------------------------------------------------------- */
.ftr { background: var(--bg-2); border-top-color: var(--rule-ink); }
.ftr a { color: var(--fg-dim); }
.ftr a:hover, .ftr a:focus-visible { color: var(--fg); }

/* --- Rails / backdrop ------------------------------------------------------ */
.rails span { border-color: rgba(73, 36, 212, .10); }
.backdrop { opacity: .5; }

/* --- Section separators ---------------------------------------------------- */
.section + .section::before {
  background: linear-gradient(90deg, transparent, var(--rule-ink) 15%, var(--rule-ink) 85%, transparent);
}

/* The dark theme backs the hero chips with near-black for legibility over
   video. v2 has no video, and that rule outranks the generic .tech li above,
   so it needs matching specificity to be undone. */
.scrub--hero .tech li {
  background: color-mix(in srgb, #ffffff 82%, var(--brand, #4924d4) 12%);
  border-color: color-mix(in srgb, var(--brand, #4924d4) 42%, transparent);
  color: var(--fg-ink);
  backdrop-filter: none;
}
.scrub--hero .tech li:hover,
.scrub--hero .tech li:focus-visible {
  background: color-mix(in srgb, #ffffff 68%, var(--brand, #4924d4) 24%);
  border-color: var(--brand, #4924d4);
}
/* Same for the console panel and its inner surfaces. */
.scrub--hero .mk__bar,
.scrub--hero .mk__filters,
.scrub--hero .tbl thead th,
.scrub--hero .tbl tfoot td { background: var(--mk-alt); }