/* Edge design system 1.0: bridge for existing page types (skill pages, catalog skill pages, pricing,
   anything on the stamped chrome). Load AFTER every other stylesheet:
     /assets/edge-kit-tokens.css, /assets/edge-kit.css, /assets/edge-kit-bridge.css
   (tools/edge_kit/apply.py injects the three links before </head>).
   It re-points the legacy token families (site tokens, sky + glass, chrome, keys, skill v3-v7,
   overhaul ov-*) at the kit tokens, so the page markup and generators stay untouched.
   The mapping lives in ONE block; `:not(#kit)` lifts it above every legacy light/dark block, and the
   --edge-* values it reads flip in dark mode inside edge-kit-tokens.css. No new colours here. */

html:root:not(#kit) {
  /* ground: paper, no sky artwork, no haze, no blur */
  --sky-image: none; --sky-haze: none; --sky-bg: var(--edge-paper); --sky-filter: none;
  --sky-ink: var(--edge-ink); --sky-muted: var(--edge-muted); --sky-blue: var(--edge-link);
  --sky-glass: var(--edge-surface); --sky-glass-strong: var(--edge-surface); --sky-glass-float: var(--edge-surface);
  --sky-glass-line: var(--edge-line); --sky-glass-shadow: none; --sky-chip: var(--edge-surface); --sky-foot: transparent;
  --glass-surface: var(--edge-surface); --glass-solid: var(--edge-surface); --glass-ground: var(--edge-paper);
  --glass-border: var(--edge-line); --glass-shadow: none; --glass-ink: var(--edge-ink); --glass-muted: var(--edge-muted); --glass-blur: 0px;

  /* site tokens (edge-tokens.css / edge-2.css) */
  --ink: var(--edge-ink); --ink-2: var(--edge-ink); --ink-3: var(--edge-muted);
  --muted: var(--edge-muted); --muted-2: var(--edge-muted); --mute: var(--edge-muted); --mut: var(--edge-muted); --faint: var(--edge-muted);
  --paper: var(--edge-paper); --soft: var(--edge-surface); --sky: var(--edge-blue-soft); --sky-strong: var(--edge-blue-soft);
  --line: var(--edge-line); --line-soft: var(--edge-line); --line-strong: var(--edge-line);
  --card-bg: var(--edge-surface); --card-edge: var(--edge-line); --card-shadow: none; --card-shadow-lift: var(--edge-shadow-media);
  --cta-bg: var(--edge-blue); --cta-fg: var(--edge-white); --cta-bg-hover: var(--edge-blue-hover); --cta-ring: var(--edge-blue-soft);
  --quiet-bg: var(--edge-surface); --quiet-bg-hover: var(--edge-blue-soft); --quiet-edge: var(--edge-line); --quiet-fg: var(--edge-ink);
  --nav-link: var(--edge-muted); --nav-link-hover: var(--edge-ink);
  --footer-bg: var(--edge-paper); --footer-sky-top: var(--edge-paper); --footer-sky-bottom: var(--edge-paper);
  --footer-head: var(--edge-muted); --footer-link: var(--edge-ink); --footer-line: var(--edge-line);
  --code-bg: var(--edge-blue-soft); --code-fg: var(--edge-ink); --pre-bg: var(--edge-surface); --pre-fg: var(--edge-ink);
  --side-rail: var(--edge-line); --side-link: var(--edge-muted); --side-link-hover: var(--edge-ink); --side-on: var(--edge-link); --side-on-bg: var(--edge-blue-soft);
  --selection-bg: var(--edge-blue-soft); --focus-ring: var(--edge-blue);
  --edge-blue-strong: var(--edge-blue-hover); --edge-blue-quiet: var(--edge-link); --edge-blue-tint: var(--edge-blue-soft); --edge-blue-tint-2: var(--edge-blue-soft);

  /* chrome (edge-chrome.css) */
  --ch-ink: var(--edge-ink); --ch-nav-link: var(--edge-muted); --ch-nav-hover: var(--edge-ink); --ch-line: var(--edge-line); --ch-line-soft: var(--edge-line);
  --ch-blue: var(--edge-blue); --ch-blue-quiet: var(--edge-link); --ch-focus: var(--edge-blue);
  --ch-cta-bg: var(--edge-blue); --ch-cta-fg: var(--edge-white); --ch-cta-bg-hover: var(--edge-blue-hover);
  --ch-foot-bg: var(--edge-paper); --ch-foot-head: var(--edge-muted); --ch-foot-link: var(--edge-ink); --ch-foot-line: var(--edge-line);
  --ch-sky: var(--edge-paper); --ch-cloud: var(--edge-paper); --ch-cloud-2: var(--edge-paper); --ch-cloud-3: var(--edge-paper);
  --ch-sw-track: var(--edge-surface); --ch-sw-knob: var(--edge-line); --ch-sw-fg: var(--edge-muted); --ch-sw-fg-hover: var(--edge-ink); --ch-sw-fg-on: var(--edge-ink);
  --ch-font: var(--edge-font-ui);

  /* keys (edge-key.css): blue = the kit keycap, dark = ink, quiet = surface on a line edge */
  --key-blue: var(--edge-blue); --key-blue-fg: var(--edge-white); --key-blue-edge: var(--edge-blue-base);
  --key-ink: var(--edge-ink); --key-ink-fg: var(--edge-paper);
  --key-glass: var(--edge-surface); --key-glass-fg: var(--edge-ink); --key-glass-edge: var(--edge-line); --key-glass-ring: var(--edge-line);
  --key-promo: var(--edge-surface); --key-promo-fg: var(--edge-ink); --key-focus: var(--edge-blue);

  /* skill pages v3-v7 (skill-static-*.css and the inline app styles) */
  --bg: var(--edge-paper); --surface: var(--edge-surface); --surface2: var(--edge-paper); --accent: var(--edge-link); --focus: var(--edge-blue);
  --wash: transparent; --shadow: none; --font: var(--edge-font-ui);
  --v3-solid: var(--edge-surface); --v3-line: var(--edge-line); --v3-card: var(--edge-surface); --v3-card-line: var(--edge-line); --v3-card-shadow: none;
  --v3-free-bg: var(--edge-success); --v3-free-ink: var(--edge-white); --v3-free-glow: transparent; --v3-ok: var(--edge-success); --v3-ok-bg: var(--edge-paper); --v3-strike: var(--edge-error);
  --v3-chat-bg: var(--edge-surface); --v3-chat-u: var(--edge-paper); --v3-chat-line: var(--edge-line); --v3-chat-ink: var(--edge-ink); --v3-chat-mut: var(--edge-muted);
  --v3a-sl: var(--edge-surface); --v3a-old: var(--edge-paper); --v3a-bad: var(--edge-error); --v3a-bad-bg: var(--edge-paper);
  --c5-card: var(--edge-surface); --c5-ask: var(--edge-paper); --c5-ink: var(--edge-ink); --c5-mut: var(--edge-muted); --c5-line: var(--edge-line);
  --c5-ic: var(--edge-blue-soft); --c5-ic2: var(--edge-line); --c5-blue: var(--edge-link); --c5-shadow: none;
  --v7-card: var(--edge-surface); --v7-line: var(--edge-line); --v7-ink: var(--edge-ink); --v7-mut: var(--edge-muted); --v7-was: var(--edge-muted);
  --v7-end: var(--edge-ink); --v7-end-ink: var(--edge-paper); --v7-end-mut: var(--edge-line); --v7-end-line: #ffffff24;
  --status-pass: var(--edge-success); --status-block: var(--edge-error);

  /* overhaul ov-* (pricing, growth, team) */
  --ov-ink: var(--edge-ink); --ov-muted: var(--edge-muted); --ov-blue: var(--edge-link); --ov-line: var(--edge-line); --ov-line-2: var(--edge-line);
  --ov-tint: var(--edge-blue-soft); --ov-soft: var(--edge-surface); --ov-hover: var(--edge-paper); --ov-base: var(--edge-paper);
  --ov-promo: var(--edge-ink); --ov-promo-ink: var(--edge-paper); --ov-promo-muted: var(--edge-line);
  --ov-dark-btn: var(--edge-ink); --ov-dark-btn-ink: var(--edge-paper); --ov-logo-bg: var(--edge-surface);
  --ov-green: var(--edge-success); --ov-green-bg: var(--edge-paper);
  --ov-display: var(--edge-font-ui); --ov-pixel: var(--edge-font-ui);
}
/* The kit's dark promo band would vanish on a dark page: flip it to a surface band. */
@media (prefers-color-scheme: dark) { html:root:not([data-theme="light"]):not(#kit) { --v7-end: var(--edge-surface); --v7-end-ink: var(--edge-ink); --v7-end-mut: var(--edge-muted); --v7-end-line: var(--edge-line); --ov-promo: var(--edge-surface); --ov-promo-ink: var(--edge-ink); --ov-promo-muted: var(--edge-muted); --key-ink-fg: var(--edge-paper); } }
html:root[data-theme="dark"]:not(#kit) { --v7-end: var(--edge-surface); --v7-end-ink: var(--edge-ink); --v7-end-mut: var(--edge-muted); --v7-end-line: var(--edge-line); --ov-promo: var(--edge-surface); --ov-promo-ink: var(--edge-ink); --ov-promo-muted: var(--edge-muted); }

/* Ground and type */
html:root:not(#kit) { background: var(--edge-paper) !important; }
html:root:not(#kit) body { font-family: var(--edge-font-ui); color: var(--edge-ink); -webkit-font-smoothing: antialiased; }
html:root:not(#kit) body::before { background: var(--edge-paper) !important; }
html:root:not(#kit) ::selection { background: var(--edge-blue-soft); color: var(--edge-ink); }
html:root:not(#kit) :is(main, .sv3, .ov) :is(h1, h2) { font-family: var(--edge-font-ui) !important; font-weight: var(--edge-type-weight-display) !important; color: var(--edge-ink); }
html:root:not(#kit) :is(main, .sv3, .ov) h1 { letter-spacing: var(--edge-type-hero-tracking) !important; line-height: var(--edge-type-hero-line) !important; }
html:root:not(#kit) :is(main, .sv3, .ov) h2 { letter-spacing: -.045em !important; line-height: var(--edge-type-section-line) !important; }
html:root:not(#kit) :is(main, .sv3, .ov) h3 { font-family: var(--edge-font-ui) !important; font-weight: 560 !important; letter-spacing: -.02em !important; }
html:root:not(#kit) a:focus-visible, html:root:not(#kit) button:focus-visible { outline: 2px solid var(--edge-blue); outline-offset: 5px; }

/* Chrome header: the kit signature (arch + lowercase live wordmark), one blue small key */
html:root:not(#kit) :is(#edge-header, #edge-footer) .edge-brand { display: inline-flex !important; align-items: center !important; gap: 11px !important; font: 560 32px/1 var(--edge-font-ui) !important; letter-spacing: -.06em !important; color: var(--edge-ink) !important; text-transform: lowercase; }
html:root:not(#kit) :is(#edge-header, #edge-footer) .edge-brand > svg { display: none !important; }
html:root:not(#kit) :is(#edge-header, #edge-footer) .edge-brand::before { content: ""; width: 32px; height: 21px; flex: none; background: url("/assets/kit/edge-mark.png") center / contain no-repeat; margin-top: 2px; }
html:root:not(#kit) #edge-header .edge-nav-links a { font: 400 13px/1.2 var(--edge-font-ui) !important; color: var(--edge-ink) !important; }
@media (prefers-color-scheme: dark) { html:root:not([data-theme="light"]):not(#kit) :is(#edge-header, #edge-footer) .edge-brand::before { filter: brightness(0) invert(94%); } }
html:root[data-theme="dark"]:not(#kit) :is(#edge-header, #edge-footer) .edge-brand::before { filter: brightness(0) invert(94%); }
@media (max-width: 700px) { html:root:not(#kit) #edge-header .edge-brand { font-size: 27px !important; gap: 8px !important; } html:root:not(#kit) #edge-header .edge-brand::before { width: 26px; height: 17px; } }

/* Keys: kit keycap geometry (3px base edge, 9px radius; small 2px / 9px) on every legacy key class */
html:root:not(#kit) :is(.edge-key, .ov-btn, .btn, .pl-btn, .pl-find-go, .el-go, .el-primary, .gw-open, .ry-btn, .tr-share-btn, .tr-try, .tr-promo-cta, .search-send, .copy-prompt, button.chip[data-copy]),
html:root:not(#kit) #edge-header .edge-setup-copy { --k-d: 3px; --k-r: 9px; --k-glow: #152b4414; font-family: var(--edge-font-ui) !important; font-weight: 500 !important; letter-spacing: 0 !important; }
html:root:not(#kit) :is(.edge-key-sm, .btn-sm, .tr-share-btn, .tr-try, .el-go, .gw-open, button.chip[data-copy]) { --k-d: 2px; --k-r: 9px; }
html:root:not(#kit) #edge-header .edge-setup-copy { --k: var(--edge-blue) !important; --k-fg: var(--edge-white) !important; --k-edge: var(--edge-blue-base) !important; }

/* Cards: the kit panel (surface, 1px line, 6px radius, no glow) */
html:root:not(#kit) .sky-glass { border-radius: 6px; }

/* Pixel-cloud art direction (Federico, 2026-10-15 review: every visual in the pixel-cloud style; real
   product UI that is evidence stays). Only the kit's own artwork, no new colours. */
/* 1. Page hero: the half-moon with its pixel fringe, top right, behind the content, decoration only. */
html:root:not(#kit) body { position: relative; }
html:root:not(#kit) body::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* the art is D wide; the box shows its left 83% and stops at the viewport edge (no overflow) */
  --kit-moon: min(42vw, 600px);
  top: 34px; right: 0; width: calc(var(--kit-moon) * .83); height: calc(var(--kit-moon) * 1.563);
  background: url("/assets/kit/sky.png") left top / var(--kit-moon) auto no-repeat; opacity: .9;
}
@media (max-width: 700px) { html:root:not(#kit) body::after { --kit-moon: 78vw; top: 210px; width: calc(var(--kit-moon) * .52); opacity: .55; } }
@media (prefers-color-scheme: dark) { html:root:not([data-theme="light"]):not(#kit) body::after { opacity: .42; } }
html:root[data-theme="dark"]:not(#kit) body::after { opacity: .42; }
/* 2. Decorative icon tiles become pixel-cloud swatches (the label carries the meaning). */
html:root:not(#kit) :is(.v3-use > span, .v3-how .hi > span, .pr-plan-ic) {
  background: url("/assets/kit/sky.png") 74% 40% / 560% auto no-repeat, var(--edge-paper) !important;
  border: 1px solid var(--edge-line) !important; box-shadow: none !important; border-radius: 4px !important;
}
html:root:not(#kit) :is(.v3-use, .v3-how .hi) > span:nth-of-type(1) { background-position: 74% 40%, 0 0 !important; }
html:root:not(#kit) .v3-uses .v3-use:nth-child(3n+2) > span { background-position: 58% 62% , 0 0 !important; }
html:root:not(#kit) .v3-uses .v3-use:nth-child(3n) > span { background-position: 88% 24%, 0 0 !important; }
html:root:not(#kit) .pr-plan:nth-child(2) .pr-plan-ic { background-position: 58% 62%, 0 0 !important; }
html:root:not(#kit) .pr-plan:nth-child(3) .pr-plan-ic { background-position: 88% 24%, 0 0 !important; }
html:root:not(#kit) :is(.v3-use > span, .v3-how .hi > span, .pr-plan-ic) > svg { visibility: hidden !important; }
/* 3. Closing CTA band: paper surface with the half-moon rising at the right, ink type. */
html:root:not(#kit) .v7-end {
  background: url("/assets/kit/sky.png") right -90px center / 380px auto no-repeat, var(--edge-surface) !important;
  border: 1px solid var(--edge-line) !important; box-shadow: none !important; color: var(--edge-ink) !important;
  --v7-end: transparent; --v7-end-ink: var(--edge-ink); --v7-end-mut: var(--edge-muted); --v7-end-line: var(--edge-line);
}
html:root:not(#kit) .v7-end-in { background: transparent !important; box-shadow: none !important; color: var(--edge-ink) !important; }
html:root:not(#kit) .v7-end :is(h2, p) { color: var(--edge-ink) !important; }
html:root:not(#kit) .v7-end p { color: var(--edge-muted) !important; }
@media (max-width: 700px) { html:root:not(#kit) .v7-end { background-size: 200px auto, auto !important; background-position: right -80px bottom -120px, 0 0 !important; } }
/* Pricing: the old blue pixel-font accent line becomes the kit's display line in Edge blue. */
html:root:not(#kit) .ov-pixel { font-family: var(--edge-font-ui) !important; font-weight: var(--edge-type-weight-display) !important; letter-spacing: var(--edge-type-hero-tracking) !important; color: var(--edge-blue) !important; }
@media (prefers-color-scheme: dark) { html:root:not([data-theme="light"]):not(#kit) .ov-pixel { color: var(--edge-link) !important; } }
html:root[data-theme="dark"]:not(#kit) .ov-pixel { color: var(--edge-link) !important; }
html:root:not(#kit) #edge-footer .edge-brand { font-size: 25px !important; gap: 8px !important; }
html:root:not(#kit) #edge-footer .edge-brand::before { width: 25px; height: 17px; }