:root {
  /* Light-mode palette */
  --warm-white: #faf8f5;
  --deep-dark: #262626;
  --navy: #1b4f72;
  --solar-gold: #ffc527;
  --warm-gray: #e5dfd3;
  --neutral-gray: #6b6b6b;
  --error-red: #b0463c;
  --error-text: #f5b7b1;
  --error-red-bg: rgba(176, 70, 60, 0.15);
  --error-red-border: rgba(176, 70, 60, 0.35);
  --navy-hover: #163e5c;
  --success: #16a34a;
  --success-hover: #15803d;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --warning: #d97706;
  --warning-strong: #b45309;
  --warning-bg: #fffbeb;

  /* Default surface for shared body */
  --background: var(--warm-white);
  --foreground: var(--deep-dark);

  /* Dark-mode (liquid-glass) tokens, used inside the [data-theme="dark"] shell */
  --glass-bg-base: #1a1a1c;

  /* Demo sketch + 3-D viewer palette */
  --sketch-wall: #f2ede4;
  --sketch-window: #7fb4e8;
  --viewer-canvas: #141416;
  --viewer-ground: #1b1b1d;
  --viewer-scene-bg: #262626;
  --glass-fg: var(--warm-white);
  --glass-fill: rgba(26, 26, 28, 0.55);
  --glass-fill-strong: rgba(26, 26, 28, 0.72);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  /* Viewer-glass tier */
  --viewer-glass-bg: rgba(38, 38, 38, 0.72);
  --viewer-glass-filter: blur(32px) saturate(180%) brightness(1.06);
  --viewer-glass-border: 1px solid rgba(250, 248, 245, 0.11);
  --viewer-glass-shadow:
    inset 0 1px 0 rgba(250, 248, 245, 0.22),
    inset 0 0 0 0.5px rgba(250, 248, 245, 0.05),
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.3);
}