/* VDS Themes — the canonical 8-theme token ramp for the whole Vision platform.
 * Single source of truth (extracted from VerticFlow) so every app themes identically.
 * Link it, then map your app's own variables onto these, e.g.:
 *     [data-theme] { --my-bg: var(--vds-bg-0); --my-text: var(--vds-fg-0); }
 * Pair with theme-bus.js (sets <html data-theme>) and theme-bus drives which block wins.
 *
 * Ramp per theme:
 *   --vds-bg-0  page background      --vds-fg-0  primary text     --vds-line        hairline border
 *   --vds-bg-1  surface             --vds-fg-1  secondary text   --vds-line-2      stronger border
 *   --vds-bg-2  raised surface      --vds-fg-2  tertiary/muted   --vds-accent      theme accent
 *   --vds-bg-3  hover               --vds-accent-2  lighter accent
 *   --vds-bg-4  active/pressed      --vds-accent-soft  calm companion   --vds-accent-contrast  text on accent
 *
 * Premium-minimal gradient tokens ("tempered ink" — hue-true, low-saturation,
 * whisper-subtle; adopt instead of flat fills for hero/page/CTA surfaces):
 *   --vds-grad-page    page background — soft Apple-style mesh blooms over the ink base (atmospheric, readable)
 *   --vds-grad-hero    wallpaper-grade mesh (vivid multi-bloom) for hero/cover/empty-state surfaces
 *   --vds-grad-accent  accent duotone — luminous edge fading into ink (CTAs, brand chips)
 *   --vds-grad-sheen   top sheen for raised sheets/popovers (layer over any surface)
 */

/* ---- Dark (default — applies with or without the attribute) ---- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --vds-bg-0:#090a0d; --vds-bg-1:#121315; --vds-bg-2:#1b1c1f; --vds-bg-3:#252628; --vds-bg-4:#2f3032;
  --vds-fg-0:#ecedef; --vds-fg-1:#b4b6ba; --vds-fg-2:#989a9e;
  --vds-line:rgba(233,242,255,.07); --vds-line-2:rgba(233,242,255,.13);
  --vds-grad-page:linear-gradient(#090a0d,#090a0d);
  --vds-accent:#E84A1D; --vds-accent-2:#f06a42; --vds-accent-soft:#5A82D0; --vds-accent-contrast:#ffffff;
  --vds-accent-glow:rgba(232,74,29,.30);
  --vds-grad-hero:radial-gradient(110% 100% at 78% 10%, rgba(255,122,60,.92), rgba(255,122,60,0) 52%), linear-gradient(165deg, transparent 38%, rgba(255,225,200,.30) 52%, transparent 66%), radial-gradient(90% 80% at 45% 42%, rgba(220,60,90,.45), rgba(220,60,90,0) 60%), radial-gradient(120% 100% at 12% 88%, rgba(142,45,76,.8), rgba(142,45,76,0) 62%), radial-gradient(80% 70% at 88% 100%, rgba(85,60,190,.35), rgba(85,60,190,0) 60%), linear-gradient(160deg,#170f15,#0a0a0c);
  --vds-grad-accent:linear-gradient(135deg,#FF9450 0%,#FF3D00 55%,#E03A6B 100%);
  --vds-grad-sheen:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%);
}

/* ---- Light ---- */
:root[data-theme="light"] {
  color-scheme: light;
  --vds-bg-0:#e6e8ea; --vds-bg-1:#f3f4f7; --vds-bg-2:#ffffff; --vds-bg-3:#ebedf0; --vds-bg-4:#e1e3e6;
  --vds-fg-0:#151618; --vds-fg-1:#4d5054; --vds-fg-2:#626569;
  --vds-line:rgba(15,18,22,.09); --vds-line-2:rgba(15,18,22,.15);
  --vds-grad-page:linear-gradient(#e6e8ea,#e6e8ea);
  --vds-accent:#E84A1D; --vds-accent-2:#c53b13; --vds-accent-soft:#4571C4; --vds-accent-contrast:#ffffff;
  --vds-accent-glow:rgba(232,74,29,.22);
  --vds-grad-hero:radial-gradient(100% 90% at 18% 10%, rgba(143,178,255,.85), rgba(143,178,255,0) 52%), radial-gradient(110% 100% at 82% 24%, rgba(255,170,200,.75), rgba(255,170,200,0) 56%), linear-gradient(165deg, transparent 36%, rgba(255,252,245,.85) 50%, transparent 66%), radial-gradient(120% 110% at 50% 104%, rgba(196,178,255,.7), rgba(196,178,255,0) 60%), radial-gradient(70% 60% at 94% 84%, rgba(150,230,210,.4), rgba(150,230,210,0) 58%), linear-gradient(180deg,#ffffff,#f1f0ec);
  --vds-grad-accent:linear-gradient(135deg,#FF7A45 0%,#E84A1D 55%,#C5306B 100%);
  --vds-grad-sheen:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 40%);
}

/* ---- Ocean — deep slate-navy + cyan ---- */
:root[data-theme="ocean"] {
  color-scheme: dark;
  --vds-bg-0:#040b13; --vds-bg-1:#0c131b; --vds-bg-2:#171d25; --vds-bg-3:#21272d; --vds-bg-4:#2b3036;
  --vds-fg-0:#eaedf0; --vds-fg-1:#b1b6bd; --vds-fg-2:#959aa1;
  --vds-line:rgba(228,244,255,.08); --vds-line-2:rgba(228,244,255,.15);
  --vds-grad-page:linear-gradient(#040b13,#040b13);
  --vds-accent:#38bdf8; --vds-accent-2:#7dd3fc; --vds-accent-soft:#6E90D0; --vds-accent-contrast:#06131f;
  --vds-accent-glow:rgba(56,189,248,.30);
  --vds-grad-hero:radial-gradient(110% 100% at 76% 12%, rgba(81,200,255,.9), rgba(81,200,255,0) 52%), linear-gradient(165deg, transparent 38%, rgba(215,242,255,.26) 52%, transparent 66%), radial-gradient(90% 80% at 42% 44%, rgba(85,95,235,.5), rgba(85,95,235,0) 60%), radial-gradient(120% 100% at 14% 88%, rgba(29,78,216,.75), rgba(29,78,216,0) 62%), radial-gradient(80% 70% at 90% 100%, rgba(140,90,240,.3), rgba(140,90,240,0) 60%), linear-gradient(160deg,#0d1628,#0a1220);
  --vds-grad-accent:linear-gradient(135deg,#7DD3FC 0%,#38BDF8 55%,#4D6DE8 100%);
  --vds-grad-sheen:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%);
}

/* ---- Forest — green-black + emerald ---- */
:root[data-theme="forest"] {
  color-scheme: dark;
  --vds-bg-0:#040d08; --vds-bg-1:#0b1510; --vds-bg-2:#161f1a; --vds-bg-3:#202824; --vds-bg-4:#2b322e;
  --vds-fg-0:#eaeeec; --vds-fg-1:#b0b8b4; --vds-fg-2:#949c98;
  --vds-line:rgba(225,249,236,.08); --vds-line-2:rgba(225,249,236,.15);
  --vds-grad-page:linear-gradient(#040d08,#040d08);
  --vds-accent:#4ade80; --vds-accent-2:#86efac; --vds-accent-soft:#6FAE86; --vds-accent-contrast:#06140d;
  --vds-accent-glow:rgba(74,222,128,.30);
  --vds-grad-hero:radial-gradient(110% 100% at 76% 12%, rgba(91,228,155,.85), rgba(91,228,155,0) 52%), linear-gradient(165deg, transparent 38%, rgba(232,250,238,.22) 52%, transparent 66%), radial-gradient(90% 80% at 46% 40%, rgba(170,225,90,.35), rgba(170,225,90,0) 58%), radial-gradient(120% 100% at 14% 88%, rgba(13,90,60,.85), rgba(13,90,60,0) 62%), radial-gradient(80% 70% at 90% 100%, rgba(45,195,185,.3), rgba(45,195,185,0) 60%), linear-gradient(160deg,#0c1a11,#08120c);
  --vds-grad-accent:linear-gradient(135deg,#86EFAC 0%,#4ADE80 55%,#14B8A6 100%);
  --vds-grad-sheen:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%);
}

/* ---- Royal — indigo-violet ---- */
:root[data-theme="royal"] {
  color-scheme: dark;
  --vds-bg-0:#0a0813; --vds-bg-1:#13111b; --vds-bg-2:#1c1b24; --vds-bg-3:#26252d; --vds-bg-4:#302f36;
  --vds-fg-0:#edecf0; --vds-fg-1:#b6b5bc; --vds-fg-2:#9a99a0;
  --vds-line:rgba(242,239,255,.09); --vds-line-2:rgba(242,239,255,.16);
  --vds-grad-page:linear-gradient(#0a0813,#0a0813);
  --vds-accent:#a78bfa; --vds-accent-2:#c4b5fd; --vds-accent-soft:#8a7be0; --vds-accent-contrast:#0f0d1d;
  --vds-accent-glow:rgba(167,139,250,.30);
  --vds-grad-hero:radial-gradient(110% 100% at 74% 12%, rgba(167,139,250,.95), rgba(167,139,250,0) 52%), linear-gradient(165deg, transparent 38%, rgba(240,232,255,.26) 52%, transparent 66%), radial-gradient(90% 80% at 44% 42%, rgba(225,70,235,.5), rgba(225,70,235,0) 58%), radial-gradient(120% 100% at 16% 86%, rgba(67,56,202,.8), rgba(67,56,202,0) 62%), radial-gradient(80% 70% at 90% 100%, rgba(60,130,255,.3), rgba(60,130,255,0) 60%), linear-gradient(160deg,#171130,#0d0b1a);
  --vds-grad-accent:linear-gradient(135deg,#C4B5FD 0%,#A78BFA 55%,#D946EF 100%);
  --vds-grad-sheen:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%);
}

/* ---- Sunset — warm umber + amber ---- */
:root[data-theme="sunset"] {
  color-scheme: dark;
  --vds-bg-0:#100803; --vds-bg-1:#19110b; --vds-bg-2:#221b15; --vds-bg-3:#2b241f; --vds-bg-4:#352e2a;
  --vds-fg-0:#f0ece9; --vds-fg-1:#bbb4af; --vds-fg-2:#9f9893;
  --vds-line:rgba(255,237,223,.09); --vds-line-2:rgba(255,237,223,.16);
  --vds-grad-page:linear-gradient(#100803,#100803);
  --vds-accent:#fb923c; --vds-accent-2:#fdba74; --vds-accent-soft:#D6A24E; --vds-accent-contrast:#1a0f06;
  --vds-accent-glow:rgba(251,146,60,.30);
  --vds-grad-hero:radial-gradient(110% 100% at 74% 14%, rgba(255,140,70,.95), rgba(255,140,70,0) 52%), radial-gradient(90% 80% at 50% 36%, rgba(255,70,100,.5), rgba(255,70,100,0) 58%), linear-gradient(165deg, transparent 36%, rgba(255,236,210,.42) 51%, transparent 66%), radial-gradient(110% 100% at 22% 88%, rgba(95,65,225,.55), rgba(95,65,225,0) 62%), radial-gradient(80% 70% at 88% 102%, rgba(45,200,220,.45), rgba(45,200,220,0) 58%), linear-gradient(160deg,#1d1020,#140d10);
  --vds-grad-accent:linear-gradient(135deg,#FDBA74 0%,#FB923C 55%,#F25C8A 100%);
  --vds-grad-sheen:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%);
}

/* ---- Rose — plum + pink ---- */
:root[data-theme="rose"] {
  color-scheme: dark;
  --vds-bg-0:#10070b; --vds-bg-1:#190f14; --vds-bg-2:#22191d; --vds-bg-3:#2c2327; --vds-bg-4:#352d31;
  --vds-fg-0:#f0ebed; --vds-fg-1:#bcb3b7; --vds-fg-2:#9f979b;
  --vds-line:rgba(255,234,245,.09); --vds-line-2:rgba(255,234,245,.16);
  --vds-grad-page:linear-gradient(#10070b,#10070b);
  --vds-accent:#f472b6; --vds-accent-2:#f9a8d4; --vds-accent-soft:#C8675C; --vds-accent-contrast:#170d12;
  --vds-accent-glow:rgba(244,114,182,.30);
  --vds-grad-hero:radial-gradient(110% 100% at 76% 12%, rgba(249,168,212,.9), rgba(249,168,212,0) 52%), linear-gradient(165deg, transparent 38%, rgba(255,242,246,.26) 52%, transparent 66%), radial-gradient(90% 80% at 46% 42%, rgba(250,110,110,.45), rgba(250,110,110,0) 58%), radial-gradient(120% 100% at 14% 88%, rgba(131,24,67,.85), rgba(131,24,67,0) 62%), radial-gradient(80% 70% at 90% 100%, rgba(150,90,220,.3), rgba(150,90,220,0) 60%), linear-gradient(160deg,#1f1119,#140c10);
  --vds-grad-accent:linear-gradient(135deg,#F9A8D4 0%,#F472B6 55%,#A855F7 100%);
  --vds-grad-sheen:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%);
}

/* ---- Mint — deep teal + aqua ---- */
:root[data-theme="mint"] {
  color-scheme: dark;
  --vds-bg-0:#030d0a; --vds-bg-1:#0a1512; --vds-bg-2:#151f1c; --vds-bg-3:#1f2826; --vds-bg-4:#2a322f;
  --vds-fg-0:#e9eeed; --vds-fg-1:#afb8b5; --vds-fg-2:#939c99;
  --vds-line:rgba(222,249,241,.08); --vds-line-2:rgba(222,249,241,.15);
  --vds-grad-page:linear-gradient(#030d0a,#030d0a);
  --vds-accent:#2dd4bf; --vds-accent-2:#5eead4; --vds-accent-soft:#5FA8B8; --vds-accent-contrast:#06140f;
  --vds-accent-glow:rgba(45,212,191,.30);
  --vds-grad-hero:radial-gradient(110% 100% at 76% 12%, rgba(110,231,216,.9), rgba(110,231,216,0) 52%), linear-gradient(165deg, transparent 38%, rgba(236,252,248,.24) 52%, transparent 66%), radial-gradient(90% 80% at 46% 42%, rgba(60,210,150,.4), rgba(60,210,150,0) 58%), radial-gradient(120% 100% at 14% 88%, rgba(14,116,144,.85), rgba(14,116,144,0) 62%), radial-gradient(80% 70% at 90% 100%, rgba(60,140,230,.3), rgba(60,140,230,0) 60%), linear-gradient(160deg,#0d1d1a,#081311);
  --vds-grad-accent:linear-gradient(135deg,#5EEAD4 0%,#2DD4BF 55%,#38BDF8 100%);
  --vds-grad-sheen:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%);
}

/* >>> GENERATED SURFACES — edit tools/vds_palette.json + rerun tools/vds_palette.py <<< */
/* Optional page depth — OFF by default. An app opts in with <html data-vds-vignette>;
   a single-hue bloom at 4% over the flat page colour, no second hue, no animation.
   Everything else about the surfaces is generated into the theme blocks above. */
:root[data-vds-vignette], :root[data-vds-vignette][data-theme="dark"] { --vds-grad-page:radial-gradient(120% 100% at 50% -10%, rgba(111,132,189,.04), transparent 60%), linear-gradient(#090a0d,#090a0d); }
:root[data-vds-vignette][data-theme="light"] { --vds-grad-page:radial-gradient(120% 100% at 50% -10%, rgba(102,135,189,.04), transparent 60%), linear-gradient(#e6e8ea,#e6e8ea); }
:root[data-vds-vignette][data-theme="ocean"] { --vds-grad-page:radial-gradient(120% 100% at 50% -10%, rgba(93,137,187,.04), transparent 60%), linear-gradient(#040b13,#040b13); }
:root[data-vds-vignette][data-theme="forest"] { --vds-grad-page:radial-gradient(120% 100% at 50% -10%, rgba(79,151,117,.04), transparent 60%), linear-gradient(#040d08,#040d08); }
:root[data-vds-vignette][data-theme="royal"] { --vds-grad-page:radial-gradient(120% 100% at 50% -10%, rgba(135,124,184,.04), transparent 60%), linear-gradient(#0a0813,#0a0813); }
:root[data-vds-vignette][data-theme="sunset"] { --vds-grad-page:radial-gradient(120% 100% at 50% -10%, rgba(175,120,78,.04), transparent 60%), linear-gradient(#100803,#100803); }
:root[data-vds-vignette][data-theme="rose"] { --vds-grad-page:radial-gradient(120% 100% at 50% -10%, rgba(175,111,142,.04), transparent 60%), linear-gradient(#10070b,#10070b); }
:root[data-vds-vignette][data-theme="mint"] { --vds-grad-page:radial-gradient(120% 100% at 50% -10%, rgba(64,152,132,.04), transparent 60%), linear-gradient(#030d0a,#030d0a); }
/* <<< END GENERATED SURFACES >>> */

/* =====================================================================
   VDS SCALE TOKENS — spacing · type · radius · hover timing · 2026-09-24
   Theme-independent, so they sit in their own plain :root block (the
   palette generator only rewrites the theme blocks and the generated
   section above). Consume these instead of hand-picked literals
   (UI audit r4 S18 / T18 / H14):
     --vds-space-1..8  4px grid: 4 8 12 16 20 24 28 32
     --vds-fs-*        2xs 11 · xs 12 · compact 13 · sm 14 · base 16 · lg 18 · 2xl 24
                       (names follow Tailwind and Verb: sm is 14 everywhere; 2xs and
                       compact are platform additions)
                       11px is the floor for any UI text.
     --vds-radius-*    sm 6 · md 10 · lg 14 · xl 18 · 2xl 22
     --vds-dur-hover / --vds-ease-hover — the ONE hover transition. List
                       background-color, border-color and color explicitly
                       (plus whatever else the control really animates);
                       never `transition: all`, which also animates the
                       focus ring and layout.
   Standalone pages should pass a fallback, e.g. var(--vds-space-3, 12px).
   ===================================================================== */
:root {
  --vds-space-1: 4px;  --vds-space-2: 8px;  --vds-space-3: 12px; --vds-space-4: 16px;
  --vds-space-5: 20px; --vds-space-6: 24px; --vds-space-7: 28px; --vds-space-8: 32px;
  --vds-fs-2xs: 11px; --vds-fs-xs: 12px; --vds-fs-compact: 13px; --vds-fs-sm: 14px;
  --vds-fs-base: 16px; --vds-fs-lg: 18px; --vds-fs-2xl: 24px;
  --vds-radius-sm: 6px; --vds-radius-md: 10px; --vds-radius-lg: 14px;
  --vds-radius-xl: 18px; --vds-radius-2xl: 22px;
  --vds-dur-hover: 140ms;
  --vds-ease-hover: ease-out;
}

/* =====================================================================
   VDS MOTION + SCROLLBARS — shared micro-polish layer · 2026-06-11
   Shipped names (consumed platform-wide — do NOT rename):
     @keyframes vds-hero-drift  +  .vds-hero-live   (living hero mesh)
     @keyframes vds-dot-pulse   +  .vds-dot-live    (live status dot)
   Every animation here is disabled under prefers-reduced-motion.
   ===================================================================== */

/* Living hero mesh: the oversized gradient drifts a few percent, very
   slowly, ping-ponging via `alternate`. Apply to any element whose
   background is a --vds-grad-* mesh (or add the animation by hand and
   reuse the keyframes). background-position only moves an image larger
   than its box — hence the 170% background-size. */
@keyframes vds-hero-drift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 12% 18%; }
}
.vds-hero-live {
  background-size: 170% 170%;
  animation: vds-hero-drift 26s ease-in-out infinite alternate;
}

/* Live status dot: a soft box-shadow ring expands from the dot and fades.
   currentColor at low alpha keeps it neutral-or-accent depending on the
   host's text color; no layout impact (box-shadow only). */
@keyframes vds-dot-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent); }
}
.vds-dot-live {
  animation: vds-dot-pulse 2.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .vds-hero-live,
  .vds-dot-live { animation: none; }
}

/* Unified thin scrollbars, theme-keyed so they read correctly on light
   AND dark ramps: transparent track, --vds-bg-4 thumb with a 2px
   transparent gutter (background-clip keeps the gutter see-through). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--vds-bg-4) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--vds-bg-4);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  /* one step more present on hover — a --vds-line-2-ish lift that works in
     both schemes (fg-2 is light on dark themes, dark on the light theme) */
  background-color: color-mix(in srgb, var(--vds-fg-2) 28%, var(--vds-bg-4));
}