/* ═══════════════════════════════════════════════════
   Design Tokens — Dark theme (VSCO-inspired)
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ── */
  --base: #0A0A0A;
  --elevated: #0E0E0E;
  --surface: #111111;
  --grid-gap: #1A1A1A;
  --divider: rgba(255, 255, 255, 0.06);

  /* ── White opacity scale ── */
  --white-04: rgba(255, 255, 255, 0.04);
  --white-06: rgba(255, 255, 255, 0.06);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-20: rgba(255, 255, 255, 0.20);
  --white-40: rgba(255, 255, 255, 0.40);
  --white-60: rgba(255, 255, 255, 0.60);
  --white-80: rgba(255, 255, 255, 0.80);
  --white-92: rgba(255, 255, 255, 0.92);
  --white-100: #FFFFFF;

  /* ── Semantic text ── */
  --text-primary: var(--white-92);
  --text-secondary: var(--white-60);
  --text-tertiary: var(--white-40);
  --text-disabled: var(--white-20);

  /* ── Accent ── */
  --accent: #FFFFFF;
  --accent-dim: var(--white-60);

  /* ── Slider ── */
  --slider-track: var(--white-12);
  --slider-track-active: var(--white-40);
  --slider-thumb: var(--white-100);
  --slider-track-height: 2px;
  --slider-thumb-size: 22px;
  --slider-touch-target: 44px;

  /* ── Layout (pt = px on 1x, CSS px on retina) ── */
  --header-height: 44px;
  --tab-switcher-height: 34px;
  --slider-area-height: 36px;
  --tools-bar-height: 84px;
  --tab-bar-height: 50px;
  --safe-area-bottom: env(safe-area-inset-bottom, 34px);
  --safe-area-top: env(safe-area-inset-top, 0px);

  /* ── Spacing scale ── */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* ── Typography ── */
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Inter', -apple-system, system-ui, sans-serif;

  --text-xs: 10px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 180ms;
  --duration-normal: 280ms;
  --duration-slow: 380ms;

  /* ── Z-index ── */
  --z-canvas: 1;
  --z-overlay: 10;
  --z-toolbar: 20;
  --z-header: 30;
  --z-modal: 40;
}