/* ===== Design Tokens ===== */
:root {
  /* Set to 1 by default; overridden by phone-scale.js on mobile */
  --phone-scale: 1;
  /* Colors — backgrounds */
  --color-bg: #0d0d12;
  --color-island: #000;
  --color-panel-bg: rgba(20, 20, 36, 0.45);
  --color-widget-bg: rgba(255, 255, 255, 0.07);
  --color-widget-bg-hover: rgba(255, 255, 255, 0.11);
  --color-expanded-bg: rgba(18, 18, 28, 0.82);
  --color-dock-bg: rgba(255, 255, 255, 0.07);
  --color-overlay-bg: rgba(0, 0, 0, 0.4);
  --color-slide-bg: rgba(255, 255, 255, 0.1);
  --color-slide-thumb: rgba(255, 255, 255, 0.95);

  /* Colors — borders */
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-top: rgba(255, 255, 255, 0.22);
  --color-border-subtle: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.11);

  /* Colors — text */
  --color-text: #fff;
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-text-dim: rgba(255, 255, 255, 0.65);
  --color-text-faint: rgba(255, 255, 255, 0.5);

  /* Colors — accent */
  --color-accent: rgba(110, 50, 200, 0.28);
  --color-accent-glow: rgba(110, 60, 240, 0.18);

  /* Phone dimensions */
  --phone-width: 290px;
  --phone-height: 622px;
  --phone-radius: 46px;
  --screen-radius: 38px;
  --island-width: 92px;
  --island-height: 28px;
  --indicator-width: 108px;
  --indicator-height: 4px;

  /* Spacing (8px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;

  /* Timings */
  --ease-ios: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --duration-slow: 0.9s;
  --duration-normal: 0.35s;
  --duration-fast: 0.2s;
}