/* ═══════════════════════════════════════════════════════════════
   Design Tokens — Apple-inspired palette
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --bg: #f5f5f7;
  --bg-primary: #ffffff;
  --bg-secondary: #f2f2f7;
  --bg-tertiary: #e5e5ea;
  --bg-inset: #f0f2f5;
  --bg-glass: rgba(255,255,255,0.72);
  --bg-glass-thick: rgba(255,255,255,0.88);

  /* Text */
  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #aeaeb2;

  /* Separators */
  --separator: rgba(60,60,67,0.12);
  --separator-opaque: #c6c6c8;

  /* Accent (amber brand) */
  --accent: #f59e0b;
  --accent-hover: #e8930a;
  --accent-bg: rgba(245,158,11,0.12);
  --accent-text: #fff;

  /* Functional */
  --blue: #007aff;
  --green: #34c759;
  --red: #ff3b30;
  --danger: #ef4444;

  /* Legacy aliases (used in JS-generated HTML) */
  --amber: #f59e0b;
  --line: rgba(0,0,0,0.06);
  --muted: #aeaeb2;
  --brand: #0b2c6b;
  --brand-hover: #12367a;
  --text: #1d1d1f;
  --text-muted: #aeaeb2;
  --border: rgba(60,60,67,0.12);
  --border-strong: rgba(60,60,67,0.18);
  --bg-elevated: #ffffff;
  --bg-surface: #f2f2f7;
  --accent-soft: rgba(245,158,11,0.12);
  --success: #34c759;

  /* Depth */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.12), 0 2px 10px rgba(0,0,0,0.04);
  --shadow-xl: 0 25px 60px rgba(0,0,0,0.16);

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 100px;

  /* Legacy radius aliases */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 100px;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Roboto, sans-serif;

  /* Type scale */
  --ts-xs: 10px;
  --ts-sm: 12px;
  --ts-base: 14px;
  --ts-md: 16px;
  --ts-lg: 20px;
  --ts-xl: 24px;
  --ts-2xl: 32px;

  /* Spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;

  /* Motion */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;
  --transition: 200ms ease;
  --transition-fast: 120ms ease;

  /* Glass */
  --blur: blur(20px) saturate(180%);

  /* Scene */
  --scene-bg: linear-gradient(180deg, #f0f2f5 0%, #e8ecf1 50%, #f5f5f7 100%);

  /* 3D Faces */
  --face-wall-a: #eaeff7;
  --face-wall-b: #d9e1ed;
  --face-ceiling: #f0f5fa;
  --face-floor: #eaeff5;

  /* Glow */
  --int-glow-eps: 0.6px;

  /* Tour tokens */
  --t-backdrop: rgba(8, 12, 22, var(--t-backdrop-opacity, .52));
  --t-ring: var(--accent);
  --t-ring-glow: rgba(245,158,11,.20);
  --t-pop-bg: #ffffff;
  --t-pop-border: #e5e9f2;
  --t-pop-shadow: 0 24px 64px rgba(2,6,23,.18), 0 2px 8px rgba(2,6,23,.05);
  --t-title: #0f172a;
  --t-text: #334155;
  --t-muted: #64748b;
  --t-accent: var(--accent);
  --t-accent-hover: var(--accent-hover);
  --t-danger-bg: #fff5f4;
  --t-danger-bd: #f2b4ae;
  --t-danger-tx: #9f1d12;
  --t-radius: 14px;
  --t-pad: 14px;
}


/* ── Dark Theme ─────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg: #000000;
  --bg-primary: #1c1c1e;
  --bg-secondary: #2c2c2e;
  --bg-tertiary: #3a3a3c;
  --bg-inset: #161b25;
  --bg-glass: rgba(28,28,30,0.72);
  --bg-glass-thick: rgba(28,28,30,0.88);

  --text-primary: #f5f5f7;
  --text-secondary: #98989d;
  --text-tertiary: #98989d;

  --separator: rgba(84,84,88,0.36);
  --separator-opaque: #48484a;

  --scene-bg: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1a 100%);
  --face-wall-a: #2e3648;
  --face-wall-b: #212c3a;
  --face-ceiling: #1e2a35;
  --face-floor: #1e2840;

  /* Legacy aliases */
  --text: #f5f5f7;
  --text-muted: #98989d;
  --muted: #98989d;
  --border: rgba(84,84,88,0.36);
  --border-strong: rgba(84,84,88,0.55);
  --bg-elevated: #1c1c1e;
  --bg-surface: #2c2c2e;
  --accent-soft: rgba(245,158,11,0.18);
  --line: rgba(255,255,255,0.06);
  --amber: #f59e0b;
  --brand: #4a7cff;
  --brand-hover: #6090ff;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.55);

  /* Tour dark */
  --t-backdrop: rgba(0,0,0,var(--t-backdrop-opacity, .62));
  --t-pop-bg: #0b1220;
  --t-pop-border: #1e293b;
  --t-pop-shadow: 0 24px 64px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.25);
  --t-title: #e2e8f0;
  --t-text: #cbd5e1;
  --t-muted: #94a3b8;
  --t-ring: var(--accent);
  --t-ring-glow: rgba(245,158,11,.15);
  --t-danger-bg: #2b1513;
  --t-danger-bd: #6b2220;
  --t-danger-tx: #fecaca;
}


/* ── Palette: Ocean Teal ──────────────────────────────────────── */
[data-palette="teal"] {
  --accent: #0d9488;
  --accent-hover: #0f766e;
  --accent-bg: rgba(13,148,136,0.10);
  --accent-soft: rgba(13,148,136,0.10);
  --accent-text: #fff;
  --amber: #0d9488;
  --brand: #134e4a;
  --brand-hover: #1a6560;
  --scene-bg: linear-gradient(180deg, #eef5f3 0%, #e5efec 50%, #f0f5f4 100%);
  --face-wall-a: #e4f1ee;
  --face-wall-b: #d0e4e0;
  --face-ceiling: #e8f5f2;
  --face-floor: #e2f0ed;
}
[data-palette="teal"][data-theme="dark"] {
  --accent: #14b8a6;
  --accent-hover: #2dd4bf;
  --accent-soft: rgba(20,184,166,0.15);
  --amber: #14b8a6;
  --brand: #5eead4;
  --brand-hover: #99f6e4;
  --scene-bg: linear-gradient(180deg, #141f24 0%, #111a1f 50%, #0c1117 100%);
  --face-wall-a: #223835;
  --face-wall-b: #172a27;
  --face-ceiling: #1a2e2c;
  --face-floor: #182b28;
}

/* ── Palette: Indigo Slate ────────────────────────────────────── */
[data-palette="indigo"] {
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-bg: rgba(99,102,241,0.10);
  --accent-soft: rgba(99,102,241,0.10);
  --accent-text: #fff;
  --amber: #6366f1;
  --brand: #312e81;
  --brand-hover: #423daa;
  --scene-bg: linear-gradient(180deg, #eff0f8 0%, #e6e7f4 50%, #f1f2f8 100%);
  --face-wall-a: #e8e9f6;
  --face-wall-b: #d8d9ec;
  --face-ceiling: #eaebf8;
  --face-floor: #e2e3f2;
}
[data-palette="indigo"][data-theme="dark"] {
  --accent: #818cf8;
  --accent-hover: #a5b4fc;
  --accent-soft: rgba(129,140,248,0.15);
  --amber: #818cf8;
  --brand: #a5b4fc;
  --brand-hover: #c7d2fe;
  --scene-bg: linear-gradient(180deg, #171925 0%, #131520 50%, #0e0f15 100%);
  --face-wall-a: #2a2c44;
  --face-wall-b: #1e2036;
  --face-ceiling: #222440;
  --face-floor: #1f2038;
}

/* ── Palette: Terracotta ──────────────────────────────────────── */
[data-palette="terracotta"] {
  --accent: #c2410c;
  --accent-hover: #9a3412;
  --accent-bg: rgba(194,65,12,0.10);
  --accent-soft: rgba(194,65,12,0.10);
  --accent-text: #fff;
  --amber: #c2410c;
  --brand: #7c2d12;
  --brand-hover: #9a3815;
  --scene-bg: linear-gradient(180deg, #f5efe9 0%, #ede4db 50%, #f7f2ee 100%);
  --face-wall-a: #f3e9dd;
  --face-wall-b: #e4d6c9;
  --face-ceiling: #f4ede4;
  --face-floor: #ede4d8;
}
[data-palette="terracotta"][data-theme="dark"] {
  --accent: #ea580c;
  --accent-hover: #f97316;
  --accent-soft: rgba(234,88,12,0.15);
  --amber: #ea580c;
  --brand: #fdba74;
  --brand-hover: #fed7aa;
  --scene-bg: linear-gradient(180deg, #1c1610 0%, #171210 50%, #140f0c 100%);
  --face-wall-a: #392e24;
  --face-wall-b: #2c2118;
  --face-ceiling: #30281e;
  --face-floor: #2c231a;
}