/* VENDORED, UNMODIFIED except the three @font-face urls (rewritten from /assets/bubbly/fonts/ to ./fonts/) and this header.
   Read-only copy of the JUWEL product design system (assets/bubbly/tokens.css), refreshed 2026-10-28 and re-checked against its current main branch (no rule has changed).
   Do not edit by hand: re-export from origin/main. The film pins <html data-theme="light"> (the world is a light lilac sky), so the dark blocks never apply. */

/* JUWEL Bubble Glass tokens (--jb-*) — work item P1, 2026-09-24.
   Canon: docs/design/JUWEL_BUBBLY_CANON_2026-09-24.md (§3 tokens, §4 font, §5 springs),
   Figma BT8PA8nvRjJQ1M0C13D0QX page no approved frame (GAP-11), token frame Canon/00 Tokens no approved frame (GAP-12).
   Values copied from docs/design/frontier-ui-20260924/tokens-bubbly.draft.css (post canon fix-up).
   Deviation from canon §4 (by work order): the @font-face rules live here, not a separate
   fonts.css, and the files are subset from the google/fonts repo (see fonts/README.md).
   Themes: light default; dark via [data-theme="dark"] or prefers-color-scheme when the root is
   not pinned to data-theme="light". Never animate backdrop-filter or box-shadow (G2.6). */

/* ---- Fonts (SIL OFL 1.1; fonts/OFL-*.txt) ---- */
@font-face {
  font-family: "Nunito";
  src: url("./fonts/nunito-latin-wght.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
/* CLS guard (A9.9): metric-matched local fallback. Values COMPUTED 2026-09-24 from the font files
   (Nunito wght=500 hhea metrics vs Arial average advance width on an English sample; see
   fonts/README.md) — not yet CLS-measured in a browser trace. */
@font-face {
  font-family: "Nunito Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 102.48%;
  ascent-override: 98.65%;
  descent-override: 34.45%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/geist-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/geist-mono-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Bedrock + surfaces (G3c.1) */
  --jb-paper: #F7F7F8;
  --jb-mist: #EEF1F7;            /* hill band / canvas wash: one cool hue, never a gradient of hues */
  --jb-surface: #FFFFFF;         /* solid content: bubbles, cards, sheets */
  --jb-surface-2: #F1F2F5;       /* wells, input rows, secondary buttons, starters, limit tray */
  --jb-line: rgb(23 24 26 / 0.08);

  /* Ink (ink = you act) */
  --jb-ink: #17181A;             /* 16.59:1 on paper */
  --jb-ink-2: #45474D;           /*  8.67:1 */
  --jb-ink-3: #5E6168;           /*  5.79:1 on paper, 5.54:1 on surface-2 (11px meter line) */
  --jb-ink-4: #8C8F97;           /*  3.02:1: icons + disabled only, never text */
  --jb-violet-text: #4A3DB8;     /*  7.40:1: links, toggle-on track, ghost buttons */
  --jb-violet: #8E7CFF;          /*  3.03:1: graphics + large text only (G3c.3) */

  /* Messages + states */
  --jb-bubble-you: #EDEBFF;      /* ink on it 15.17:1 */
  --jb-error: #B4233C;           /* 6.04:1 on paper; white on it 6.47:1 (End) */
  --jb-error-soft: #FDECEF;
  --jb-garnet: #C44B7A;          /* End in a voice session (G6, Figma no approved frame (GAP-221)): white on it 4.53:1; not an error colour */
  --jb-amber-ink: #7A4E00;       /* caution family: offline, didn't finish. Never used for limits */
  --jb-amber-soft: #FFF4DC;      /* amber-ink on it 6.59:1 */
  --jb-private: #E9EAEE;         /* private frost; ink-2 on it 7.72:1 */
  --jb-limit-tray: var(--jb-surface-2); /* a limit is not an error: neutral, never amber/red (B8.2) */

  /* Section pill tints (G7.7): single hues, never the iridescence */
  --jb-tint-sky: #E3F1FB;   --jb-tint-sky-ink: #1D5A7A;
  --jb-tint-peach: #FFF0E6; --jb-tint-peach-ink: #8A4B1F;
  --jb-tint-lilac: #EEEBFF; --jb-tint-lilac-ink: #4A3DB8;
  --jb-tint-mint: #E4F6EE;  --jb-tint-mint-ink: #1F6B4A;

  /* The one carrier (G3c.2): gem diamond at rest; gem body only in thinking/speaking/happy */
  --jb-irid: linear-gradient(135deg, #8E7CFF 0%, #4EC8F0 50%, #FFB88C 100%);
  --irid: var(--jb-irid);        /* legacy alias remap (§5b.3): was magenta -> orange */

  /* Glass: chrome only (G6.1), max 2 on screen (G6.3), never animated (G2.6).
     The composer drops blur and goes solid (--jb-glass-solid) while [data-state="streaming"]:
     no backdrop-filter over moving content. Never resize a blurred box: grow an opaque layer. */
  --jb-glass-bg: rgb(255 255 255 / 0.72);
  --jb-glass-blur: 24px;
  --jb-glass-rim: rgb(255 255 255 / 0.9);
  --jb-glass-solid: #FFFFFF;     /* opaque path: Solid setting, reduced transparency, contrast: more */

  /* Sphere (neutral glass bubble that holds the gem; not iridescent) */
  --jb-sphere-top: #FFFFFF;
  --jb-sphere-bottom: #EEF1F7;

  /* Radius by role (G1.1, G1.2) */
  --jb-r-8: 8px;
  --jb-r-12: 12px;               /* icon wells */
  --jb-r-16: 16px;               /* settings groups (16-20) */
  --jb-r-20: 20px;               /* bubbles, list + content cards */
  --jb-r-28: 28px;               /* sheet tops, two-row composer */
  --jb-r-32: 32px;               /* hero + artifact only */
  --jb-r-48: 48px;               /* full-bleed desktop panels */
  --jb-r-full: 999px;            /* composer at one line, chips, primary buttons, meter */

  /* Spacing (4-pt) */
  --jb-s-4: 4px;
  --jb-s-8: 8px;
  --jb-s-12: 12px;
  --jb-s-16: 16px;               /* phone side gutter (G1.5) */
  --jb-s-20: 20px;
  --jb-s-24: 24px;
  --jb-s-32: 32px;
  --jb-s-40: 40px;
  --jb-s-56: 56px;
  --jb-target-min: 24px;         /* WCAG 2.5.8 floor */
  --jb-target: 44px;             /* canon target (G1.5) */
  --jb-tobottom-offset: 140px;   /* jump-to-latest pill above the composer (canon no approved frame (GAP-89)) */
  --jb-control-h: 48px;          /* control height: buttons, inputs, menu rows (approved 2026-10-03) */
  --jb-voice-caption-clearance: 16px; /* min gap caption bottom -> composer top (voice dock) */

  /* Focus (A9.3, judges 2026-09-24): 2px ring, 2px offset, follows the control's own radius,
     never clipped. Derived from the gem violet family. #4A3DB8 is 7.40:1 on paper, 7.08:1 on
     surface-2, 6.59:1 on the private frost; dark #B3A8FF is 9.09:1 on void, 7.71:1 on surface-2. */
  --jb-focus-ring: var(--jb-violet-text);
  --jb-focus-width: 2px;
  --jb-focus-offset: 2px;
  /* Halo / connecting ring around the gem: the gem's own violet, never an alien blue (graphic, 3.03:1) */
  --jb-ring-connect: var(--jb-violet);

  /* Elevation */
  --jb-e1: 0 1px 2px rgb(23 24 26 / 0.04), 0 4px 12px rgb(23 24 26 / 0.06);
  --jb-e2: 0 8px 24px rgb(41 46 77 / 0.10);
  --jb-e3: 0 -8px 40px rgb(23 24 26 / 0.14);
  --jb-e-dialog: 0 8px 40px rgb(23 24 26 / 0.14); /* centred desktop dialog (canon no approved frame (GAP-13)); phone sheets keep --jb-e3 */
  /* Scrim: the light value dims the page; on the dark page a light-ish ink scrim vanished, so dark uses deeper black. */
  --jb-scrim: rgb(14 15 18 / .32);
  --jb-scrim-dock: rgb(14 15 18 / .12);
  --jb-lip: inset 0 -2px 0 rgb(0 0 0 / 0.45); /* primary CTA soft lip: MAY, needs §12 #13.
     Never animate box-shadow (G2.6): paint the lip on a ::after and animate its opacity/transform. */

  /* Type: Nunito (variable, SIL OFL 1.1) + Geist Mono. Founder approved Direction B as drawn
     (Nunito) on 2026-09-24, which settles §12 #2 for JUWEL. Plus Jakarta Sans remains a one-token
     swap: change --jb-font-ui only (PJS has no 800: display falls back to 700). "Nunito Fallback" is a local() face with size-adjust /
     ascent-override so the swap does not shift layout (CLS <= 0.1); its metrics are NOT measured yet. */
  --jb-font-ui: "Nunito", "Nunito Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --jb-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --jb-w-regular: 500;
  --jb-w-semibold: 600;
  --jb-w-bold: 700;
  --jb-w-extrabold: 800;         /* Nunito ExtraBold: display greetings only, as Direction B was drawn */
  --jb-type-display-xl: 800 50px/56px var(--jb-font-ui);   /* the one emphasized element (G4.3) */
  --jb-type-display: 800 32px/38px var(--jb-font-ui);
  --jb-type-title: 700 26px/32px var(--jb-font-ui);
  --jb-type-headline: 700 20px/26px var(--jb-font-ui);
  --jb-type-body: 500 17px/26px var(--jb-font-ui);
  --jb-type-label: 700 16px/20px var(--jb-font-ui);
  --jb-type-callout: 600 15px/22px var(--jb-font-ui);
  --jb-type-caption: 500 13px/18px var(--jb-font-ui);
  --jb-type-micro: 500 11px/14px var(--jb-font-ui);      /* meter line only: the floor */
  --jb-type-mono: 400 12px/16px var(--jb-font-mono);

  /* Springs (G2.1): the six canon tokens only. Curves copied verbatim from R4§2.2
     (fast/default/slow spatial, fast effects) and from B spec §4 (default/slow effects,
     re-simulated with the same method). DERIVED, not official M3 web tokens. */
  --jb-spring-pop: linear(0, 0.133, 0.398, 0.656, 0.872, 1.009, 1.074, 1.092, 1.08, 1.057, 1.032, 1.013, 1, 0.993, 0.992, 0.993, 0.995, 0.997, 0.999, 1, 1.001, 1.001, 1.001, 1, 1);
  --jb-spring-pop-dur: 470ms;    /* 0.6/800 fast-spatial: finger-sized things only (G2.3) */
  --jb-spring-float: linear(0, 0.071, 0.213, 0.378, 0.535, 0.671, 0.781, 0.863, 0.923, 0.963, 0.988, 1.003, 1.011, 1.014, 1.013, 1.012, 1.01, 1.007, 1.005, 1.004, 1.002, 1.001, 1.001, 1, 1);
  --jb-spring-float-dur: 480ms;  /* 0.8/380 default-spatial: sheets, composer grow, tray dock */
  --jb-spring-drift: linear(0, 0.066, 0.203, 0.363, 0.519, 0.655, 0.766, 0.851, 0.913, 0.956, 0.984, 1.001, 1.01, 1.014, 1.014, 1.013, 1.011, 1.008, 1.006, 1.004, 1.003, 1.002, 1.001, 1, 1);
  --jb-spring-drift-dur: 650ms;  /* 0.8/200 slow-spatial: voice dock, diamond steps */
  --jb-fade-fast: linear(0, 0.102, 0.278, 0.453, 0.6, 0.715, 0.799, 0.86, 0.904, 0.934, 0.955, 0.969, 0.979, 0.985, 0.99, 0.993, 0.995, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1, 1);
  --jb-fade-fast-dur: 190ms;     /* 1.0/3800 fast-effects: press tint, copy tick */
  --jb-fade: linear(0, 0.082, 0.241, 0.4, 0.548, 0.668, 0.757, 0.827, 0.878, 0.914, 0.94, 0.958, 0.971, 0.98, 0.986, 0.991, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1, 1);
  --jb-fade-dur: 280ms;          /* 1.0/1600 default-effects: toasts, banners, connecting ring */
  --jb-fade-slow: linear(0, 0.075, 0.223, 0.383, 0.523, 0.643, 0.738, 0.808, 0.862, 0.902, 0.93, 0.951, 0.966, 0.976, 0.983, 0.988, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 0.999, 1);
  --jb-fade-slow-dur: 370ms;     /* 1.0/800 slow-effects: theme swap, private frost, settle-breath */

  /* P2 identity tokens kept by G2.1 */
  --jb-ease-arrive: cubic-bezier(0.22, 1, 0.36, 1);
  --jb-arrive-dur: 760ms;        /* gem first arrival only */
  --dur-2: 262ms;                /* first-win canvas reveal */
  --jb-reduced-dur: 200ms;       /* reduced motion: cross-fade between static frames (G3.9) */

  /* Gem timing (§3.1) */
  --jb-gem-think-beat: 650ms;
  --jb-gem-work-step: 4700ms;
  --jb-gem-breath-max: 2400ms;
  --jb-gem-scale-listen: 1.06;
  --jb-gem-scale-speak: 1.05;
  --jb-gem-scale-happy: 1.12;
  --jb-gem-lift: 6%;

  /* ---- Depth (founder ruling 2026-10-08, launch day: the JUWEL face reads "way too similar to grokbot", add DEPTH).
     Work item C2 / VEX-798 under VEX-795. Spec: DESIGN_SPEC.md §2 (laneC); Figma BT8PA8nvRjJQ1M0C13D0QX page no approved frame (GAP-147),
     variables collection "JUWEL depth · 2026-10-08" no approved frame (GAP-148). Every raw colour for the depth layer lives here; the
     face-next CSS only references these tokens. Light values here; dark in both dark blocks below; Solid / reduced
     transparency / more contrast in the solid block (glass becomes opaque, blur 0, no ambient field).
     Glass = chrome only (the header bar and the composer tray, max 2 on screen); the blur radius never animates
     (G2.6 holds for the glass itself, only the pixels under it change). ---- */
  --jb-depth-wash: radial-gradient(60% 55% at 82% 18%, #EEEBFF 0%, rgb(238 235 255 / 0) 70%), radial-gradient(50% 45% at 8% 92%, #E3F1FB 0%, rgb(227 241 251 / 0) 70%), #F7F7F8;
  --jb-depth-glass-bg: rgb(255 255 255 / 0.58);
  --jb-depth-glass-blur: 28px;
  --jb-depth-glass-sat: 1.6;
  --jb-depth-facet-light: linear-gradient(180deg, rgb(255 255 255 / 0.55) 0%, rgb(255 255 255 / 0) 42%);
  --jb-depth-rim: inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 0 0 1px rgb(23 24 26 / 0.08);
  --jb-depth-irid-hair: linear-gradient(90deg, rgb(142 124 255 / 0.55), rgb(78 200 240 / 0.40) 55%, rgb(255 184 140 / 0.50));
  --jb-depth-e1: 0 1px 2px rgb(23 24 26 / 0.05), 0 6px 18px -6px rgb(41 46 77 / 0.14);   /* content: bubbles, starter cards */
  --jb-depth-e2: 0 2px 6px rgb(23 24 26 / 0.06), 0 16px 40px -10px rgb(41 46 77 / 0.22); /* chrome: header bar, composer tray */
  --jb-depth-hl: inset 0 1px 0 rgb(255 255 255 / 0.7);  /* the 1px top highlight on a lit bubble */
  --jb-depth-hero-floor: radial-gradient(closest-side, rgb(41 46 77 / 0.22), rgb(41 46 77 / 0));
  --jb-depth-facet: 14px;        /* composer chamfer, desktop */
  --jb-depth-facet-sm: 10px;     /* composer chamfer under 768px; header bar */
  --jb-depth-facet-bubble: 8px;  /* the one cut corner on a bubble */
  --jb-depth-r-bubble: 20px;
  --jb-depth-composer-h: 72px;   /* 64px under 768px */
  --jb-depth-send: 48px;         /* hit box; the drawn diamond is a 34px square rotated 45deg */
  --jb-depth-on-irid: #17181A;   /* the arrow / glyph ink on an irid fill: fixed dark in both themes (>= 4.5:1 on violet, sky and peach) */
  --jb-depth-hero-h: 440px;      /* 232px under 768px */
  --jb-depth-bar-h: 56px;        /* floating header bar: 52px under 768px */
  --jb-depth-field-alpha: 0.18;  /* ambient particle4d field (C1) */
  --jb-depth-field-halo: 0.25;
  --jb-depth-type-display: 800 64px/64px var(--jb-font-ui);   /* 800 40px/42px under 768px */
  --jb-depth-type-display-ls: -0.02em;
  --jb-depth-type-eyebrow: 600 12px/16px var(--jb-font-mono);
  --jb-depth-type-eyebrow-ls: 0.08em;
}

@media (max-width: 767.98px) {
  :root {
    --jb-depth-glass-blur: 20px;   /* light blur on phones (perf) */
    --jb-depth-composer-h: 64px;
    --jb-depth-hero-h: 232px;
    --jb-depth-bar-h: 52px;
    --jb-depth-type-display: 800 40px/42px var(--jb-font-ui);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --jb-paper: #0E0F12;
    --jb-mist: #121419;
    --jb-surface: #17181C;
    --jb-surface-2: #1F2026;
    --jb-line: rgb(242 243 245 / 0.10);
    --jb-ink: #F2F3F5;
    --jb-ink-2: #C4C6CC;
    --jb-ink-3: #9A9DA5;
    --jb-ink-4: #6B6E76;
    --jb-violet-text: #B3A8FF;
    --jb-bubble-you: #2A2640;
    --jb-error: #FF8A9E;
    --jb-error-soft: #3A1A22;
    --jb-amber-ink: #F2C46B;
    --jb-amber-soft: #33280F;
    --jb-private: #1A1B20;
    --jb-tint-sky: #1B2A33;   --jb-tint-sky-ink: #9CCBE6;
    --jb-tint-peach: #33251C; --jb-tint-peach-ink: #F0C2A2;
    --jb-tint-lilac: #231F38; --jb-tint-lilac-ink: #B3A8FF;
    --jb-tint-mint: #17291F;  --jb-tint-mint-ink: #9AD8B8;
    --jb-glass-bg: rgb(30 31 36 / 0.72);
    --jb-glass-rim: rgb(255 255 255 / 0.10);
    --jb-glass-solid: #1F2026;
    --jb-sphere-top: #23242A;
    --jb-sphere-bottom: #17181C;
    --jb-e1: 0 1px 2px rgb(0 0 0 / 0.30), 0 4px 12px rgb(0 0 0 / 0.30);
    --jb-e2: 0 8px 24px rgb(0 0 0 / 0.40);
    --jb-e3: 0 -8px 40px rgb(0 0 0 / 0.50);
    --jb-e-dialog: 0 8px 40px rgb(0 0 0 / 0.50);
    --jb-scrim: rgb(0 0 0 / .55);
    --jb-scrim-dock: rgb(0 0 0 / .32);
    --jb-depth-wash: radial-gradient(60% 55% at 82% 18%, #1A1630 0%, rgb(26 22 48 / 0) 70%), radial-gradient(50% 45% at 8% 92%, #0F1E26 0%, rgb(15 30 38 / 0) 70%), #0E0F12;
    --jb-depth-glass-bg: rgb(26 27 33 / 0.56);
    --jb-depth-glass-sat: 1.4;
    --jb-depth-facet-light: linear-gradient(180deg, rgb(255 255 255 / 0.07) 0%, rgb(255 255 255 / 0) 42%);
    --jb-depth-rim: inset 0 1px 0 rgb(255 255 255 / 0.10), inset 0 0 0 1px rgb(242 243 245 / 0.10);
    --jb-depth-irid-hair: linear-gradient(90deg, rgb(142 124 255 / 0.70), rgb(78 200 240 / 0.50) 55%, rgb(255 184 140 / 0.55));
    --jb-depth-e1: 0 1px 2px rgb(0 0 0 / 0.40), 0 8px 20px -6px rgb(0 0 0 / 0.55);
    --jb-depth-e2: 0 2px 6px rgb(0 0 0 / 0.45), 0 18px 44px -10px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(142 124 255 / 0.10);
    --jb-depth-hl: inset 0 1px 0 rgb(255 255 255 / 0.06);
    --jb-depth-hero-floor: radial-gradient(closest-side, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0));
    --jb-depth-field-alpha: 0.38;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --jb-paper: #0E0F12;
  --jb-mist: #121419;
  --jb-surface: #17181C;
  --jb-surface-2: #1F2026;
  --jb-line: rgb(242 243 245 / 0.10);
  --jb-ink: #F2F3F5;
  --jb-ink-2: #C4C6CC;
  --jb-ink-3: #9A9DA5;
  --jb-ink-4: #6B6E76;
  --jb-violet-text: #B3A8FF;
  --jb-bubble-you: #2A2640;
  --jb-error: #FF8A9E;
  --jb-error-soft: #3A1A22;
  --jb-amber-ink: #F2C46B;
  --jb-amber-soft: #33280F;
  --jb-private: #1A1B20;
  --jb-tint-sky: #1B2A33;   --jb-tint-sky-ink: #9CCBE6;
  --jb-tint-peach: #33251C; --jb-tint-peach-ink: #F0C2A2;
  --jb-tint-lilac: #231F38; --jb-tint-lilac-ink: #B3A8FF;
  --jb-tint-mint: #17291F;  --jb-tint-mint-ink: #9AD8B8;
  --jb-glass-bg: rgb(30 31 36 / 0.72);
  --jb-glass-rim: rgb(255 255 255 / 0.10);
  --jb-glass-solid: #1F2026;
  --jb-sphere-top: #23242A;
  --jb-sphere-bottom: #17181C;
  --jb-e1: 0 1px 2px rgb(0 0 0 / 0.30), 0 4px 12px rgb(0 0 0 / 0.30);
  --jb-e2: 0 8px 24px rgb(0 0 0 / 0.40);
  --jb-e3: 0 -8px 40px rgb(0 0 0 / 0.50);
  --jb-e-dialog: 0 8px 40px rgb(0 0 0 / 0.50);
  --jb-scrim: rgb(0 0 0 / .55);
  --jb-scrim-dock: rgb(0 0 0 / .32);
  --jb-depth-wash: radial-gradient(60% 55% at 82% 18%, #1A1630 0%, rgb(26 22 48 / 0) 70%), radial-gradient(50% 45% at 8% 92%, #0F1E26 0%, rgb(15 30 38 / 0) 70%), #0E0F12;
  --jb-depth-glass-bg: rgb(26 27 33 / 0.56);
  --jb-depth-glass-sat: 1.4;
  --jb-depth-facet-light: linear-gradient(180deg, rgb(255 255 255 / 0.07) 0%, rgb(255 255 255 / 0) 42%);
  --jb-depth-rim: inset 0 1px 0 rgb(255 255 255 / 0.10), inset 0 0 0 1px rgb(242 243 245 / 0.10);
  --jb-depth-irid-hair: linear-gradient(90deg, rgb(142 124 255 / 0.70), rgb(78 200 240 / 0.50) 55%, rgb(255 184 140 / 0.55));
  --jb-depth-e1: 0 1px 2px rgb(0 0 0 / 0.40), 0 8px 20px -6px rgb(0 0 0 / 0.55);
  --jb-depth-e2: 0 2px 6px rgb(0 0 0 / 0.45), 0 18px 44px -10px rgb(0 0 0 / 0.65), 0 0 0 1px rgb(142 124 255 / 0.10);
  --jb-depth-hl: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --jb-depth-hero-floor: radial-gradient(closest-side, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0));
  --jb-depth-field-alpha: 0.38;
}

/* Reduced transparency / contrast and the in-app "Solid" setting (G6.2) */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --jb-glass-bg: var(--jb-glass-solid);
    --jb-glass-blur: 0px;
  }
}
/* Depth under reduced transparency / more contrast: opaque chrome, no blur, no field. A separate block with
   :root:root (0,2,0) because the dark blocks above set the same tokens at (0,2,0) and a bare :root would lose
   to them (the wash stays: a static gradient is not transparency). */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root:root {
    --jb-depth-glass-bg: var(--jb-glass-solid);
    --jb-depth-glass-blur: 0px;
    --jb-depth-glass-sat: 1;
    --jb-depth-facet-light: none;
    --jb-depth-rim: inset 0 0 0 1px var(--jb-line);
    --jb-depth-field-alpha: 0;
  }
}

:root[data-solid="on"] {
  --jb-glass-bg: var(--jb-glass-solid);
  --jb-glass-blur: 0px;
  --jb-depth-glass-bg: var(--jb-glass-solid);
  --jb-depth-glass-blur: 0px;
  --jb-depth-glass-sat: 1;
  --jb-depth-facet-light: none;
  --jb-depth-rim: inset 0 0 0 1px var(--jb-line);
  --jb-depth-field-alpha: 0;
}

/* Reduced motion (G3.9): every spring becomes a 200 ms opacity cross-fade */
@media (prefers-reduced-motion: reduce) {
  :root {
    --jb-spring-pop: linear(0, 1);
    --jb-spring-float: linear(0, 1);
    --jb-spring-drift: linear(0, 1);
    --jb-spring-pop-dur: var(--jb-reduced-dur);
    --jb-spring-float-dur: var(--jb-reduced-dur);
    --jb-spring-drift-dur: var(--jb-reduced-dur);
    --jb-gem-scale-listen: 1;
    --jb-gem-scale-speak: 1;
    --jb-gem-scale-happy: 1;
  }
}

:root[data-still-gem="on"] {
  --jb-gem-scale-listen: 1;
  --jb-gem-scale-speak: 1;
  --jb-gem-scale-happy: 1;
}

/* ---- Depth: ambient field gray (juwel-depth C1, VEX-797) ----
   field-gray is C1-only: ink-4, the colour the tiles mix toward when the field desaturates. The wash, field-alpha and
   field-halo tokens (and their Solid / reduced-transparency zeroing) come from C2 (#760) above. */
:root { --jb-depth-field-gray: #9A9DA5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --jb-depth-field-gray: #6B6E76; }
}
:root[data-theme="dark"] { --jb-depth-field-gray: #6B6E76; }

/* ---- JUWEL looks: the 14 new shells (W5-r2; Figma G8 "Shells: 14 new colourways" no approved frame (GAP-313), MOTION_SPEC F1 / R3) ----
   One token per role that flips with the theme, like --jb-tint-sky-ink: the LIGHT-theme value here, the DARK value in the two dark blocks below.
   --jb-shell-<id> is the shell colour (the body's first gradient stop on a sheen shell); --jb-shell-<id>-b is a sheen shell's second stop (the body
   gradient runs from --jb-shell-<id> to -b); --jb-shell-<id>-crown is a sheen shell's one solid crown (Q1: the iridescent AI-state crown still reads on it).
   The eyes are --jb-paper (#F7F7F8 light / #0E0F12 dark): every stop and crown is >= 4.5:1 against them in its theme (the board computed it; the
   test recomputes it). Hex values are the board's card text, not eyeballed. Ids with a hyphen keep it (lilac-mist). */
:root {
  --jb-shell-opal: #5B3FD0; --jb-shell-opal-b: #13768A; --jb-shell-opal-crown: #3B5BB0;
  --jb-shell-dawn: #8E2FA8; --jb-shell-dawn-b: #B8412A; --jb-shell-dawn-crown: #A23A6E;
  --jb-shell-aurora: #0B7A58; --jb-shell-aurora-b: #2A4FC0; --jb-shell-aurora-crown: #1C6590;
  --jb-shell-ruby: #A4162F;
  --jb-shell-citrine: #8A6300;
  --jb-shell-alexandrite: #0C7C79; --jb-shell-alexandrite-b: #8A2C86; --jb-shell-alexandrite-crown: #4C5482;
  --jb-shell-clay: #A4584A;
  --jb-shell-lilac-mist: #6A5F8C;
  --jb-shell-seafoam: #2A7468;
  --jb-shell-midnight: #1F2A7A;
  --jb-shell-eclipse: #5B1F9E;
  --jb-shell-pine: #0F4D3A;
  --jb-shell-ember: #A8321A;
  --jb-shell-frost: #46689E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jb-shell-opal: #BDB2FF; --jb-shell-opal-b: #8AD6F0; --jb-shell-opal-crown: #A7C0F8;
    --jb-shell-dawn: #E2B0FF; --jb-shell-dawn-b: #FFC4A3; --jb-shell-dawn-crown: #F2BCD0;
    --jb-shell-aurora: #86EBC8; --jb-shell-aurora-b: #B3C4FF; --jb-shell-aurora-crown: #9CDDE0;
    --jb-shell-ruby: #FF9AAB;
    --jb-shell-citrine: #F0CC62;
    --jb-shell-alexandrite: #7EE8DF; --jb-shell-alexandrite-b: #E3A6E0; --jb-shell-alexandrite-crown: #B7C8EA;
    --jb-shell-clay: #F4C0B4;
    --jb-shell-lilac-mist: #D3CCEC;
    --jb-shell-seafoam: #B5E6DC;
    --jb-shell-midnight: #7C8CFF;
    --jb-shell-eclipse: #C07CFF;
    --jb-shell-pine: #4FD1A0;
    --jb-shell-ember: #FF9F7A;
    --jb-shell-frost: #C9D9FF;
  }
}
:root[data-theme="dark"] {
  --jb-shell-opal: #BDB2FF; --jb-shell-opal-b: #8AD6F0; --jb-shell-opal-crown: #A7C0F8;
  --jb-shell-dawn: #E2B0FF; --jb-shell-dawn-b: #FFC4A3; --jb-shell-dawn-crown: #F2BCD0;
  --jb-shell-aurora: #86EBC8; --jb-shell-aurora-b: #B3C4FF; --jb-shell-aurora-crown: #9CDDE0;
  --jb-shell-ruby: #FF9AAB;
  --jb-shell-citrine: #F0CC62;
  --jb-shell-alexandrite: #7EE8DF; --jb-shell-alexandrite-b: #E3A6E0; --jb-shell-alexandrite-crown: #B7C8EA;
  --jb-shell-clay: #F4C0B4;
  --jb-shell-lilac-mist: #D3CCEC;
  --jb-shell-seafoam: #B5E6DC;
  --jb-shell-midnight: #7C8CFF;
  --jb-shell-eclipse: #C07CFF;
  --jb-shell-pine: #4FD1A0;
  --jb-shell-ember: #FF9F7A;
  --jb-shell-frost: #C9D9FF;
}

/* ---- JUWEL looks: the outfit palette (MOTION_SPEC L1; Figma G11 no approved frame (GAP-315) collection "G11 outfit palette", Light / Dark, ten tokens "o/*") ----
   A piece takes a TONE, never a colour of its own, so it follows light and dark and sits on any shell. --jb-o-same is the body's tone (ink in light, paper in dark), -mid the graphite garment
   tone, -soft the soft grey of ribs and linings, -on the inverse of the body, -rim the 0.8 MU separation ring (char/rim), -glass and -sheen the see-through lens fill and the Bubble Glass highlight bar
   (alpha is part of the value), -acc-1..3 the iridescent accent the Listening crown already uses (a piece spends it in ONE place). Values are the board's own, not eyeballed. */
:root {
  --jb-o-same: #17181A; --jb-o-mid: #45474D; --jb-o-soft: #8C8F97; --jb-o-on: #F7F7F8; --jb-o-rim: #F7F7F8;
  --jb-o-glass: rgb(255 255 255 / .30); --jb-o-sheen: rgb(255 255 255 / .62);
  --jb-o-acc-1: #8E7CFF; --jb-o-acc-2: #4EC8F0; --jb-o-acc-3: #FFB88C;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --jb-o-same: #F2F3F5; --jb-o-mid: #C4C6CC; --jb-o-soft: #6B6E76; --jb-o-on: #17181A; --jb-o-rim: #2B2C33;
    --jb-o-glass: rgb(255 255 255 / .16); --jb-o-sheen: rgb(255 255 255 / .55);
    --jb-o-acc-1: #B3A8FF; --jb-o-acc-2: #7ED9F5; --jb-o-acc-3: #FFC9A8;
  }
}
:root[data-theme="dark"] {
  --jb-o-same: #F2F3F5; --jb-o-mid: #C4C6CC; --jb-o-soft: #6B6E76; --jb-o-on: #17181A; --jb-o-rim: #2B2C33;
  --jb-o-glass: rgb(255 255 255 / .16); --jb-o-sheen: rgb(255 255 255 / .55);
  --jb-o-acc-1: #B3A8FF; --jb-o-acc-2: #7ED9F5; --jb-o-acc-3: #FFC9A8;
}