/* ============================================================
   @thebitwise/ui — Design Tokens
   Single source of truth for the Bitwise brand system.
   Hosted at https://ui.thebitwise.co/tokens.css

   Usage in any layout:
     <link rel="stylesheet" href="https://ui.thebitwise.co/tokens.css" />
     <html data-brand="bitwise">   (or "curator" or "etch")

   No raw rgba/hex values in product stylesheets — everything
   references a named token from this file.
   ============================================================ */


/* ── @property declarations — top-level, cannot be inside @layer ──
   Registers semantic color tokens so they participate correctly in
   transitions and are typed for the browser's style engine.
   ─────────────────────────────────────────────────────────── */
@property --bg             { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --surface        { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --surface-2      { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --border         { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --border-subtle  { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --text           { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --text-muted     { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --text-strong    { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --text-subtle    { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --accent         { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --accent-hover   { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --accent-glow    { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --overlay-bg     { syntax: '<color>'; inherits: true; initial-value: transparent; }

/* ── Pointer-reactive light — top-level (cannot be inside @layer) ──
   Written by components/light/light.js on mousemove.
   Initial values degrade gracefully (light centred, no distance).
   ─────────────────────────────────────────────────────────── */
@property --pointer-x    { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --pointer-y    { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --pointer-dist { syntax: '<number>';     inherits: true; initial-value: 0;   }


@layer tokens {

/* ── Base token layer ───────────────────────────────────────
   Import in every product. Override via semantic aliases only.
   ─────────────────────────────────────────────────────────── */
:root {

  /* Color: Warm Neutral Ramp — Bitwise / Curator */
  --warm-950: #0C0A09;
  --warm-900: #1C1917;
  --warm-800: #292524;
  --warm-700: #44403C;
  --warm-600: #57534E;
  --warm-500: #78716C;
  --warm-400: #A8A29E;
  --warm-300: #D6D3D1;
  --warm-200: #E7E5E0;
  --warm-100: #F5F5F4;
  --warm-50:  #FAFAF9;

  /* Color: Cool Mineral Ramp — Etch / glass surfaces */
  --slate-950: #050A0F;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;

  /* Color: Amber — Bitwise / Curator accent */
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;

  /* Color: Copper — Etch accent */
  --copper-300: #D4956A;
  --copper-400: #C17D3C;
  --copper-500: #A6682A;
  --copper-600: #8B5318;

  /* Color: CRT warmth — yellowed beige of aged screens */
  --crt-tan: #C8A96E;

  /* Color: Signal — shared across all brands */
  --signal-green: #4ADE80;
  --signal-amber: #FBBF24;
  --signal-red:   #F87171;
  --signal-blue:  #60A5FA;

  /* Signal RGB channel variants — for rgba() composition in component CSS.
     Must match the hex values of the signal tokens above exactly.
     Usage: background: rgba(var(--color-success-rgb), 0.08);
     These are brand-agnostic base tokens; semantic aliases (--color-success-rgb etc.)
     are set per-brand in the semantic alias layer below. */
  --signal-green-rgb: 74, 222, 128;   /* #4ADE80 */
  --signal-amber-rgb: 251, 191, 36;   /* #FBBF24 */
  --signal-red-rgb:   248, 113, 113;  /* #F87171 */
  --signal-blue-rgb:  96, 165, 250;   /* #60A5FA */

  /* Typography */
  --font-display-bitwise:  "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-display-curator:  "Cormorant Garamond", serif;
  --font-display-etch:     "Playfair Display", serif;
  --font-body:             "IBM Plex Sans", sans-serif;
  --font-terminal:         "Monofur", "Courier New", monospace;
  --font-ui:               var(--font-body);   /* UI controls; override per brand */
  --on-accent:             var(--warm-900);    /* text on filled accent surface; override per brand */

  /* Type scale */
  --tracking-wide: 0.07em;   /* uppercase labels, dt terms, eyebrows */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  4rem;

  /* Spacing */
  --space-0-5: 0.125rem;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border radius */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
  --ease-default:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Glass elevation — thickness is the elevation signal.
     Glass doesn't float (no atmospheric fog/halo). It rests on a
     surface and physical thickness creates the hierarchy. Cast shadows
     are tight and directional — the shadow a pane casts, not a glow.
     This is the cold/mineral/futuristic element that contrasts the
     organic textures (linen, paper, stone) used in Curator. */

  /* Level 1 — 2mm surface glass (nav items, bare containers) */
  --glass-1-bg:     rgba(255, 255, 255, 0.02);
  --glass-1-border: rgba(255, 255, 255, 0.08);
  --glass-1-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);

  /* Level 2 — 6mm elevated glass (cards, panels, sidebars) */
  --glass-2-bg:     rgba(255, 255, 255, 0.02);
  --glass-2-border: rgba(255, 255, 255, 0.12);
  --glass-2-rim:    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --glass-2-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  /* Blur stays low: the glass should show the framework working behind it. */
  --glass-2-blur:   2px;

  /* Level 3 — 12mm thick glass (dialogs, puck, highest elevation) */
  --glass-3-bg:     rgba(255, 255, 255, 0.035);
  --glass-3-border: rgba(255, 255, 255, 0.18);
  --glass-3-rim:    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --glass-3-floor:  inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --glass-3-shadow: 0 8px 24px rgba(0, 0, 0, 0.50);
  --glass-3-blur:   6px;

  /* Liquid glass — see-through by blur, never by tint (operator: "don't lighten/tint the slate to
     separate it — blur what's behind it"). Zero fill; separation comes from the frosted backdrop
     (blur + a little saturation so whatever is behind keeps its life), a thin specular rim on the
     lit top edge, a darker floor edge, and an inner edge falloff that reads as the pane's lensed
     thickness. Shadow stays tight (Glass Elevation Model). Neutral only: no hue. */
  --glass-liquid-bg:       transparent;
  --glass-liquid-blur:     14px;
  --glass-liquid-saturate: 1.1;
  --glass-liquid-rim:      inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 1px 0 0 rgba(255, 255, 255, 0.04);
  --glass-liquid-floor:    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  --glass-liquid-lens:     inset 0 0 32px rgba(0, 0, 0, 0.28);

  /* Glass specular highlights — pointer-reactive radial gradient.
     Applied via ::before pseudo-elements on elevated glass surfaces.
     The gradient tracks --pointer-x / --pointer-y, creating a
     highlight that follows the cursor across every glass surface. */
  --glass-1-specular: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    rgba(255, 255, 255, 0.04) 0%,
    transparent 55%
  );
  --glass-2-specular: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    rgba(255, 255, 255, 0.08) 0%,
    transparent 60%
  );
  --glass-3-specular: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    rgba(255, 255, 255, 0.12) 0%,
    transparent 65%
  );

  /* Surface texture identifier — referenced by surface.css.
     Set per-brand; not a visual value, consumed by JS/CSS selectors. */
  --surface-texture: "noise";

  /* Engraved / debossed — elements cut into the surface */
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.5);

  /* Overlay / backdrop */
  --overlay-bg-warm: rgba(28, 25, 23, 0.80);
  --overlay-bg-cool: rgba(0, 8, 16, 0.80);
  --overlay-bg:      rgba(0, 0, 0, 0.75); /* safe fallback — overridden per brand */

  /* Z-index scale — never use raw integers in component CSS */
  --z-base:     0;    /* document flow */
  --z-raised:   1;    /* cards, elevated surfaces */
  --z-sticky:   100;  /* sticky headers */
  --z-dropdown: 200;  /* dropdowns, popovers */
  --z-overlay:  300;  /* modal backdrop */
  --z-modal:    400;  /* modal content */
  --z-toast:    500;  /* toast notifications */
  --z-nav:      600;  /* bottom nav, puck — always on top */

  /* Gradients */
  --gradient-hero:    radial-gradient(ellipse 80% 50% at 50% 0%, var(--accent-subtle), transparent);
  --gradient-ambient: linear-gradient(135deg, var(--accent-subtle) 0%, transparent 60%);
  --gradient-shimmer: linear-gradient(90deg, transparent 0%, var(--accent-subtle) 50%, transparent 100%);

  /* Opacity */
  --opacity-muted: 0.4;   /* reduced-visibility state; used for disabled/static fallback */

  /* Breakpoints — for JS consumption only (matchMedia, ResizeObserver).
     CSS @media rules must use the raw px values — custom properties
     are not evaluated inside @media query conditions.

     Usage in JS:
       const md = getComputedStyle(document.documentElement)
         .getPropertyValue('--bp-md').trim(); // → "768px"
       window.matchMedia(`(min-width: ${md})`).matches;
  */
  --bp-sm:  480px;   /* landscape phone */
  --bp-md:  768px;   /* tablet portrait */
  --bp-lg:  1024px;  /* tablet landscape / laptop */
  --bp-xl:  1280px;  /* desktop */
  --bp-2xl: 1536px;  /* wide desktop */

}


/* ── Semantic alias layer ───────────────────────────────────
   Per-brand. Maps base tokens to product-agnostic names.
   Components use these names — never base tokens directly.
   Set data-brand on <html> or any ancestor element.
   ─────────────────────────────────────────────────────────── */

/* The Bitwise Company — parent portal
   Aesthetic: black-and-white subway grotesque / silicon valley precision /
   Japandi restraint / Tom Ford dark luxury.
   Monochromatic: near-black warm surfaces, warm-white as the only accent.
   Contrast IS the brand. */
[data-brand="bitwise"] {
  /* Surface — near-black, warm undertone prevents clinical coldness */
  --bg:            var(--warm-950);
  --surface:       var(--warm-900);
  --surface-2:     var(--warm-800);
  --border:        var(--warm-800);
  --border-subtle: var(--warm-700);
  --overlay-bg:    var(--overlay-bg-warm);

  /* Text — high contrast on near-black; warm-400 = 8.3:1 on warm-950 */
  --text:          var(--warm-200);
  --text-muted:    var(--warm-400);
  --text-strong:   var(--warm-50);
  --text-subtle:   var(--warm-600);   /* timestamps, metadata — recedes below --text-muted */

  /* Accent — warm white (no hue; contrast is the signal, not color) */
  --accent:        var(--warm-100);
  --accent-hover:  var(--warm-50);

  /* Accent alpha scale — white through glass */
  --accent-tint:          rgba(245, 245, 244, 0.03);
  --accent-subtle:        rgba(245, 245, 244, 0.05);
  --accent-border:        rgba(245, 245, 244, 0.08);
  --accent-border-mid:    rgba(245, 245, 244, 0.14);
  --accent-focus-ring:    rgba(245, 245, 244, 0.18);
  --accent-border-strong: rgba(245, 245, 244, 0.22);
  --accent-glow:          transparent;               /* zero-glow rule: no bloom on monochromatic accent */

  /* Highlight (mark element) */
  --color-highlight-bg: rgba(245, 245, 244, 0.15);

  /* Signal */
  --color-success:        var(--signal-green);
  --color-success-bg:     rgba(74, 222, 128, 0.08);
  --color-success-border: rgba(74, 222, 128, 0.20);
  --color-success-rgb:    var(--signal-green-rgb);
  --color-warning:        var(--signal-amber);
  --color-warning-bg:     rgba(251, 191, 36, 0.08);
  --color-warning-border: rgba(251, 191, 36, 0.20);
  --color-warning-rgb:    var(--signal-amber-rgb);
  --color-error:          var(--signal-red);
  --color-error-bg:       rgba(248, 113, 113, 0.08);
  --color-error-border:   rgba(248, 113, 113, 0.25);
  --color-error-rgb:      var(--signal-red-rgb);
  --color-error-ring:     color-mix(in srgb, var(--color-error) 15%, transparent);
  --color-error-ring-focus: color-mix(in srgb, var(--color-error) 25%, transparent);
  --color-info:           var(--signal-blue);
  --color-info-bg:        rgba(96, 165, 250, 0.08);
  --color-info-border:    rgba(96, 165, 250, 0.20);
  --color-info-rgb:       var(--signal-blue-rgb);

  /* Typography */
  --font-display:  var(--font-display-bitwise);
  --font-body:     var(--font-display-bitwise);
  /* UI control font override — subway/lapidary register */
  --font-ui:       var(--font-display);

  /* Text on filled accent surface (btn-primary, chips) */
  --on-accent: var(--warm-900);

  /* Glass — Level 1 is a translucent surface; 2% white is invisible on warm-950 */
  --glass-1-bg:     color-mix(in srgb, var(--surface) 40%, transparent);
  --glass-1-border: var(--border);
  --glass-1-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);

  /* Brand shape — sharp, lapidary, subway-sign corners */
  --component-radius: var(--radius-xs);   /* 2px — buttons, inputs, badges */
  --card-radius:      var(--radius-sm);   /* 4px — cards, panels */
  --overlay-radius:   var(--radius-xs);   /* 2px — dialogs, drawers, popovers */

  /* Surface texture */
  --surface-texture: "noise";
}

/* Curator — community content platform */
[data-brand="curator"] {
  /* Surface */
  --bg:            var(--warm-900);
  --surface:       var(--warm-800);
  --surface-2:     var(--warm-700);
  --border:        var(--warm-700);
  --border-subtle: var(--warm-600);
  --overlay-bg:    var(--overlay-bg-warm);

  /* Text */
  --text:          var(--warm-300);
  --text-muted:    var(--warm-400);   /* warm-500 = 3.7:1 on warm-900, fails WCAG AA */
  --text-strong:   var(--warm-100);
  --text-subtle:   var(--warm-600);   /* timestamps, metadata — recedes below --text-muted */

  /* Accent */
  --accent:        var(--amber-400);
  --accent-hover:  var(--amber-300);

  /* Accent alpha scale — amber through glass */
  --accent-tint:          rgba(251, 191, 36, 0.03);
  --accent-subtle:        rgba(251, 191, 36, 0.05);
  --accent-border:        rgba(251, 191, 36, 0.08);
  --accent-border-mid:    rgba(251, 191, 36, 0.14);
  --accent-focus-ring:    rgba(251, 191, 36, 0.18);
  --accent-border-strong: rgba(251, 191, 36, 0.22);
  --accent-glow:          rgba(251, 191, 36, 0.12);

  /* Highlight */
  --color-highlight-bg: rgba(251, 191, 36, 0.20);

  /* Signal */
  --color-success:        var(--signal-green);
  --color-success-bg:     rgba(74, 222, 128, 0.08);
  --color-success-border: rgba(74, 222, 128, 0.20);
  --color-success-rgb:    var(--signal-green-rgb);
  --color-warning:        var(--signal-amber);
  --color-warning-bg:     rgba(251, 191, 36, 0.08);
  --color-warning-border: rgba(251, 191, 36, 0.20);
  --color-warning-rgb:    var(--signal-amber-rgb);
  --color-error:          var(--signal-red);
  --color-error-bg:       rgba(248, 113, 113, 0.08);
  --color-error-border:   rgba(248, 113, 113, 0.25);
  --color-error-rgb:      var(--signal-red-rgb);
  --color-error-ring:     color-mix(in srgb, var(--color-error) 15%, transparent);
  --color-error-ring-focus: color-mix(in srgb, var(--color-error) 25%, transparent);
  --color-info:           var(--signal-blue);
  --color-info-bg:        rgba(96, 165, 250, 0.08);
  --color-info-border:    rgba(96, 165, 250, 0.20);
  --color-info-rgb:       var(--signal-blue-rgb);

  /* Typography */
  --font-display:  var(--font-display-curator);
  --font-ui:       var(--font-body);   /* explicit: UI controls use body sans, not display serif */

  /* Text on filled accent surface */
  --on-accent: var(--warm-900);

  /* Brand shape — editorial, warm, rounded */
  --component-radius: var(--radius-md);   /* 8px — buttons, inputs, badges */
  --card-radius:      var(--radius-lg);   /* 12px — cards, panels */
  --overlay-radius:   var(--radius-lg);   /* 12px — dialogs, drawers, popovers */

  /* Surface texture */
  --surface-texture: "linen";
}

/* Etch — AI design system generator */
[data-brand="etch"] {
  /* Surface */
  --bg:            var(--slate-950);
  --surface:       var(--slate-900);
  --surface-2:     var(--slate-800);
  --border:        var(--slate-700);
  --border-subtle: var(--slate-600);
  --overlay-bg:    var(--overlay-bg-cool);

  /* Text */
  --text:          var(--slate-200);
  --text-muted:    var(--slate-400);   /* slate-500 = 3.7:1 on slate-950, fails WCAG AA */
  --text-strong:   var(--slate-50);
  --text-subtle:   var(--slate-600);   /* timestamps, metadata — recedes below --text-muted */

  /* Accent */
  --accent:        var(--copper-400);
  --accent-hover:  var(--copper-300);

  /* Accent alpha scale — copper through glass */
  --accent-tint:          rgba(193, 125, 60, 0.03);
  --accent-subtle:        rgba(193, 125, 60, 0.08);
  --accent-border:        rgba(193, 125, 60, 0.12);
  --accent-border-mid:    rgba(193, 125, 60, 0.20);
  --accent-focus-ring:    rgba(193, 125, 60, 0.25);
  --accent-border-strong: rgba(193, 125, 60, 0.22);
  --accent-glow:          rgba(193, 125, 60, 0.12);

  /* Highlight */
  --color-highlight-bg: rgba(193, 125, 60, 0.20);

  /* Signal */
  --color-success:        var(--signal-green);
  --color-success-bg:     rgba(74, 222, 128, 0.08);
  --color-success-border: rgba(74, 222, 128, 0.20);
  --color-success-rgb:    var(--signal-green-rgb);
  --color-warning:        var(--signal-amber);
  --color-warning-bg:     rgba(251, 191, 36, 0.08);
  --color-warning-border: rgba(251, 191, 36, 0.20);
  --color-warning-rgb:    var(--signal-amber-rgb);
  --color-error:          var(--signal-red);
  --color-error-bg:       rgba(248, 113, 113, 0.08);
  --color-error-border:   rgba(248, 113, 113, 0.25);
  --color-error-rgb:      var(--signal-red-rgb);
  --color-error-ring:     color-mix(in srgb, var(--color-error) 15%, transparent);
  --color-error-ring-focus: color-mix(in srgb, var(--color-error) 25%, transparent);
  --color-info:           var(--signal-blue);
  --color-info-bg:        rgba(96, 165, 250, 0.08);
  --color-info-border:    rgba(96, 165, 250, 0.20);
  --color-info-rgb:       var(--signal-blue-rgb);

  /* Typography */
  --font-display:  var(--font-display-etch);
  --font-ui:       var(--font-body);   /* explicit: UI controls use body sans, not display serif */

  /* Text on filled accent surface */
  --on-accent: var(--slate-900);

  /* Brand shape — precision, architectural, slightly softened */
  --component-radius: var(--radius-sm);   /* 4px — buttons, inputs, badges */
  --card-radius:      var(--radius-md);   /* 8px — cards, panels */
  --overlay-radius:   var(--radius-sm);   /* 4px — dialogs, drawers, popovers */

  /* Surface texture */
  --surface-texture: "slate";
}


/* Bitwise accent on light — the warm-white accent inverts to warm ink */
[data-brand="bitwise"][data-theme="light"] {
  --accent:               var(--warm-900);
  --accent-hover:         var(--warm-800);
  --on-accent:            var(--warm-50);
  --accent-tint:          rgba(28, 25, 23, 0.03);
  --accent-subtle:        rgba(28, 25, 23, 0.05);
  --accent-border:        rgba(28, 25, 23, 0.10);
  --accent-border-mid:    rgba(28, 25, 23, 0.16);
  --accent-focus-ring:    rgba(28, 25, 23, 0.20);
  --accent-border-strong: rgba(28, 25, 23, 0.26);
}

/* ── Light mode ─────────────────────────────────────────────
   Apply [data-theme="light"] to <html> to activate.
   Works with any brand. Inverts surface and glass tokens.
   ─────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:            var(--warm-50);
  --surface:       #ffffff;
  --surface-2:     var(--warm-100);
  --border:        var(--warm-200);
  --border-subtle: var(--warm-100);
  --overlay-bg:    rgba(250, 250, 249, 0.90);

  /* Text — dark on light surface */
  --text:          var(--warm-800);
  --text-muted:    var(--warm-600);
  --text-strong:   var(--warm-950);
  --text-subtle:   var(--warm-400);

  /* Glass — dark glass on light surface */
  --glass-1-bg:     rgba(0, 0, 0, 0.02);
  --glass-1-border: rgba(0, 0, 0, 0.08);
  --glass-1-shadow: 0 1px 1px rgba(0, 0, 0, 0.10);

  --glass-2-bg:     rgba(0, 0, 0, 0.015);
  --glass-2-border: rgba(0, 0, 0, 0.10);
  --glass-2-rim:    inset 0 1px 0 rgba(255, 255, 255, 0.70);
  --glass-2-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
  --glass-2-blur:   2px;

  --glass-3-bg:     rgba(0, 0, 0, 0.025);
  --glass-3-border: rgba(0, 0, 0, 0.12);
  --glass-3-rim:    inset 0 1px 0 rgba(255, 255, 255, 0.80);
  --glass-3-floor:  inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  --glass-3-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --glass-3-blur:   6px;

  --glass-liquid-bg:       transparent;
  --glass-liquid-blur:     14px;
  --glass-liquid-saturate: 1.2;
  --glass-liquid-rim:      inset 0 1px 0 rgba(255, 255, 255, 0.80), inset 1px 0 0 rgba(255, 255, 255, 0.40);
  --glass-liquid-floor:    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  --glass-liquid-lens:     inset 0 0 32px rgba(0, 0, 0, 0.05);

  /* Specular — lighter, less opacity on light backgrounds */
  --glass-1-specular: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    rgba(255, 255, 255, 0.50) 0%,
    transparent 55%
  );
  --glass-2-specular: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    rgba(255, 255, 255, 0.60) 0%,
    transparent 60%
  );
  --glass-3-specular: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    rgba(255, 255, 255, 0.70) 0%,
    transparent 65%
  );

  /* Shadow inset — lighter on light background */
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.10);
}

} /* end @layer tokens */