/* landing-dark.v2.css -- the landing's dark scheme (2026-09-27, patches/landing_static).
 * v2: the glass buttons (Discord, See features) write their words in --deep,
 * which is the dark button fill here: their text follows --fg instead.
 * Served max-age=604800: never edit in place, ship a new name.
 *
 * html[data-theme="dark"] redefines the landing's colour tokens (the Tailwind
 * palette is built on them: bg-bg, text-fg, border-line ...), in the tones of
 * the dashboard's dark scheme, then covers the few places that were literal
 * light colours: Tailwind's default border, the glass panels, the black
 * wordmark, the feature animations' paper (their own --fx-* tokens) and the
 * white boxes inside them. The flip itself: landing-dark.v1.js holds the
 * page still (data-theming) and wraps the change in a .32s view transition,
 * the dashboard's own timing. The header button (.jpa-thm) is drawn by the
 * sectionsNN.shots bundle. */
html[data-theme="dark"] {
  --bg: 240 4% 8%;
  --surface: 240 4% 11%;
  --surface-2: 240 4% 15%;
  --fg: 220 10% 94%;
  --fg-muted: 220 6% 66%;
  --fg-subtle: 220 5% 52%;
  --line: 240 4% 18%;
  --line-strong: 240 4% 27%;
  --accent: 0 0% 96%;
  --accent-fg: 240 4% 8%;
  --accent-soft: 240 4% 15%;
  --warm: 220 6% 55%;
  --warm-soft: 240 4% 15%;
  --deep: 240 3% 18%;
  --deep-fg: 220 10% 96%;
  --deep-soft: 240 4% 14%;
  --shadow-card: 0 1px 2px hsl(0 0% 0% / .45), 0 8px 24px hsl(0 0% 0% / .35);
  color-scheme: dark;
  background: hsl(var(--bg));
}
html[data-theme="dark"] body { background: hsl(var(--bg)); color: hsl(var(--fg)); }

/* Tailwind's default border colour is a literal light grey; :where() keeps
   this at zero specificity, so every explicit border-* utility still wins */
:where(html[data-theme="dark"]) *,
:where(html[data-theme="dark"]) *::before,
:where(html[data-theme="dark"]) *::after { border-color: hsl(var(--line)); }

/* the glass panels (menus, pricing cards) were white glass */
html[data-theme="dark"] .glass { background: hsl(240 4% 11% / .78); border-color: hsl(0 0% 100% / .08); }
html[data-theme="dark"] .glass-plain {
  background: hsl(240 4% 12% / .92); border-color: hsl(0 0% 100% / .08);
  box-shadow: 0 1px 1px hsl(0 0% 0% / .3), 0 10px 34px hsl(0 0% 0% / .35);
}
html[data-theme="dark"] .glass-dark { background: hsl(0 0% 100% / .06); }

/* the glass buttons' words are "text-deep", and --deep is the dark fill here */
html[data-theme="dark"] .text-deep { color: hsl(var(--fg)); }

/* the wordmark is black ink on a transparent picture */
html[data-theme="dark"] img[src*="agoras-fulltext"] { filter: invert(1); }

/* the hero's colour wash sits on white; on the dark ground it reads as a glow */
html[data-theme="dark"] .aurora { opacity: .5; }

/* the feature animations: their own paper and ink */
html[data-theme="dark"] #features .fx-stage {
  --fx-paper: #1C1C1F; --fx-paper2: #242428; --fx-paper3: #2C2C31;
  --fx-ink: #ECECEE; --fx-ink2: #C7C7CC; --fx-ink3: #9A9AA1;
  --fx-rule: #303036; --fx-rule2: #3B3B42;
  --fx-lift: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px -6px rgba(0, 0, 0, .5); --fx-scrim: rgba(0, 0, 0, .55);
  background: #1C1C1F;
}
html[data-theme="dark"] #features .fx-hero { background: #1C1C1F; }
html[data-theme="dark"] #features .fx-sf,
html[data-theme="dark"] #features .fx-srow,
html[data-theme="dark"] #features .fx-flagbtn,
html[data-theme="dark"] #features .fx-px-routes,
html[data-theme="dark"] #features .fx-radio,
html[data-theme="dark"] #features .fx-ln-m b,
html[data-theme="dark"] #features .fx-sw i { background: #26262B; }
html[data-theme="dark"] #features .fx-buy { background: linear-gradient(180deg, #36363C, #2A2A2F) padding-box; color: #ECECEE; }
html[data-theme="dark"] #features .fx-ph.is-cut { background: #2A2A2E; }
html[data-theme="dark"] #features .fx-srow.is-flagged { background: #3A2726; border-color: #5B3330; }
html[data-theme="dark"] #features .fx-px-bar { background: #34353B; }
html[data-theme="dark"] #features .fx-px-bar i { background: #6C6F79; }
html[data-theme="dark"] #features .fx-rg-inlet { fill: #242428; stroke: #5C5F68; }
html[data-theme="dark"] #features .fx-rg-rails path { stroke: #4A4D55; }
html[data-theme="dark"] #features .fx-sw { background: #3A3B41; }
html[data-theme="dark"] #features .fx-sw i::after { background: #55585F; }
html[data-theme="dark"] #features .fx-wh-rail { background: repeating-linear-gradient(90deg, #45484F 0 4px, transparent 4px 8px); }
html[data-theme="dark"] #features .fx-ln-site { background: rgba(28, 28, 31, .85); }

/* the pricing cards: white glass in a metal rim (pricing-cards.v1.css); dark glass in the same rim */
html[data-theme="dark"] #pricing .glass-plain {
  background:
    linear-gradient(hsl(240 4% 12% / .94), hsl(240 4% 12% / .94)) padding-box,
    linear-gradient(145deg,
        hsl(0 0% 100% / .26) 0%,
        hsl(var(--line-strong)) 22%,
        hsl(0 0% 100% / .2) 38%,
        hsl(var(--warm)) 58%,
        hsl(0 0% 100% / .18) 74%,
        hsl(var(--line-strong)) 100%) border-box;
  box-shadow:
    0 1px 1px hsl(0 0% 0% / .3),
    0 10px 34px hsl(0 0% 0% / .35),
    inset 0 1px hsl(0 0% 100% / .08);
}
/* the diagonal highlight metal-sections paints across the cards is white at .55: a hint of it on the dark ground */
html[data-theme="dark"] #features .grid > *::before,
html[data-theme="dark"] #pricing .grid > *::before,
html[data-theme="dark"] #features .fx-card::before {
  background: linear-gradient(122deg, hsl(0 0% 100% / 0) 34%, hsl(0 0% 100% / .07) 47%, hsl(0 0% 100% / 0) 60%);
}

/* the header button: the language button's shape */
.jpa-thm {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 9999px; margin: 0;
  border: 0; background: transparent; color: hsl(var(--fg-muted)); cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.jpa-thm:hover, .jpa-thm:focus-visible { background: hsl(var(--surface-2)); color: hsl(var(--fg)); outline: none; }
.jpa-thm svg { width: 18px; height: 18px; display: block; }

/* THE FLIP: held still, then one frame, cross-faded where view transitions
   exist (the dashboard's recipe and timing, static/jp/theme.css) */
html[data-theming] *, html[data-theming] *::before, html[data-theming] *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: ease; }