:root {
  /* Surface and text */
  --glass-bg-canvas: #111114;
  --glass-bg-surface: rgba(28, 28, 34, 0.88);
  --glass-bg-surface-strong: rgba(32, 32, 40, 0.92);
  --glass-bg-surface-modal: rgba(36, 36, 44, 0.96);
  --glass-bg-muted: rgba(255, 255, 255, 0.06);
  --glass-bg-nav: rgba(17, 17, 20, 0.95);
  --glass-text-primary: rgba(255, 255, 255, 0.9);
  --glass-text-secondary: rgba(255, 255, 255, 0.6);
  --glass-text-tertiary: rgba(255, 255, 255, 0.38);
  --glass-text-on-accent: #111114;

  /* Border strategy */
  --glass-stroke-soft: rgba(255, 255, 255, 0.06);
  --glass-stroke-base: rgba(255, 255, 255, 0.10);
  --glass-stroke-strong: rgba(255, 255, 255, 0.16);
  --glass-stroke-focus: rgba(232, 194, 106, 0.5);
  --glass-stroke-danger: rgba(236, 72, 72, 0.64);
  --glass-stroke-warning: rgba(234, 149, 0, 0.62);
  --glass-stroke-success: rgba(18, 176, 109, 0.62);

  /* Elevation + blur */
  --glass-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --glass-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4);
  --glass-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.5);
  --glass-shadow-modal: 0 14px 34px rgba(0, 0, 0, 0.6);
  --glass-shadow-nav: 0 8px 18px rgba(0, 0, 0, 0.4);
  --glass-blur-sm: 4px;
  --glass-blur-md: 8px;
  --glass-blur-lg: 12px;
  --glass-blur-nav: 16px;

  /* Radius */
  --glass-radius-xs: 8px;
  --glass-radius-sm: 12px;
  --glass-radius-md: 16px;
  --glass-radius-lg: 22px;
  --glass-radius-xl: 28px;

  /* Spacing + density */
  --glass-space-1: 4px;
  --glass-space-2: 8px;
  --glass-space-3: 12px;
  --glass-space-4: 16px;
  --glass-space-5: 20px;
  --glass-space-6: 24px;
  --glass-space-7: 28px;
  --glass-space-8: 32px;
  --glass-density-compact-scale: 0.86;
  --glass-density-default-scale: 1;

  /* Tone system */
  --glass-tone-neutral-bg: rgba(100, 116, 139, 0.12);
  --glass-tone-neutral-fg: rgba(255, 255, 255, 0.5);
  --glass-tone-info-bg: rgba(212, 162, 78, 0.15);
  --glass-tone-info-fg: #e8c26a;
  --glass-tone-processing-bg: rgba(96, 165, 250, 0.12);
  --glass-tone-processing-fg: #60a5fa;
  --glass-tone-success-bg: rgba(16, 185, 129, 0.15);
  --glass-tone-success-fg: #34d399;
  --glass-tone-warning-bg: rgba(245, 158, 11, 0.18);
  --glass-tone-warning-fg: #fbbf24;
  --glass-tone-danger-bg: rgba(239, 68, 68, 0.15);
  --glass-tone-danger-fg: #f87171;

  --glass-overlay-soft: rgba(0, 0, 0, 0.5);
  --glass-overlay: rgba(0, 0, 0, 0.6);
  --glass-overlay-strong: rgba(0, 0, 0, 0.75);

  /* Accent + interactive rings — amber/gold */
  --glass-accent-from: #d4a24e;
  --glass-accent-to: #e8c26a;
  --glass-accent-shadow-soft: rgba(212, 162, 78, 0.24);
  --glass-accent-shadow-strong: rgba(212, 162, 78, 0.32);
  --glass-focus-ring: rgba(232, 194, 106, 0.16);
  --glass-focus-ring-strong: rgba(232, 194, 106, 0.22);
  --glass-danger-ring: rgba(239, 68, 68, 0.14);
  --glass-ghost-hover-bg: rgba(255, 255, 255, 0.06);

  --glass-segment-track: #1c1c1e;
  --glass-segment-indicator: #3a3a3c;
  --glass-segment-indicator-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  --glass-capsule-nav-bg: rgba(28, 28, 34, 0.85);
  --glass-capsule-nav-border: rgba(255, 255, 255, 0.08);
  --glass-capsule-nav-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 1.5px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --glass-nav-stage-active: #e8c26a;
}

[data-glass-preset='subtle'] {
  --glass-bg-surface: rgba(26, 26, 32, 0.85);
  --glass-bg-surface-strong: rgba(30, 30, 38, 0.90);
  --glass-bg-surface-modal: rgba(34, 34, 42, 0.94);
  --glass-bg-nav: rgba(17, 17, 20, 0.96);
  --glass-blur-sm: 2px;
  --glass-blur-md: 4px;
  --glass-blur-lg: 8px;
  --glass-shadow-sm: 0 1px 6px rgba(0, 0, 0, 0.2);
  --glass-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --glass-shadow-lg: 0 8px 18px rgba(0, 0, 0, 0.4);
  --glass-shadow-modal: 0 10px 22px rgba(0, 0, 0, 0.5);
  --glass-shadow-nav: 0 6px 14px rgba(0, 0, 0, 0.3);
  --glass-blur-nav: 12px;
}