/* ============================================================
   Capture — design tokens (Capture-screen subset; expands into
   the full system once the aesthetic is approved)
   Scope a screen with .ds-light or .ds-dark to pick a theme.
   ============================================================ */

.ds-light, .ds-dark {
  /* type */
  --font: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;

  /* radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* spacing scale (4-based) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
}

/* ---------- LIGHT ---------- */
.ds-light {
  --accent:        oklch(0.585 0.205 6);     /* raspberry — "interactive" */
  --accent-press:  oklch(0.500 0.205 6);
  --accent-fg:     #ffffff;
  --accent-tint:   oklch(0.585 0.205 6 / 0.12);
  --accent-ring:   oklch(0.585 0.205 6 / 0.28);

  --bg:            #ffffff;
  --bg-grouped:    #f2f2f7;
  --surface:       #ffffff;
  --surface-2:     #f2f2f7;
  --surface-3:     #e9e9ee;

  --label:         #000000;
  --label-2:       rgba(60,60,67,0.60);
  --label-3:       rgba(60,60,67,0.30);
  --separator:     rgba(60,60,67,0.14);
  --fill:          rgba(120,120,128,0.12);
  --fill-2:        rgba(120,120,128,0.20);

  --success:       oklch(0.62 0.15 150);
  --success-tint:  oklch(0.62 0.15 150 / 0.14);
  --caution:       oklch(0.66 0.14 64);
  --caution-tint:  oklch(0.66 0.14 64 / 0.16);
  --destructive:   oklch(0.575 0.20 28);

  --shadow-raised:  0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-overlay: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  color-scheme: light;
}

/* ---------- DARK ---------- */
.ds-dark {
  --accent:        oklch(0.685 0.190 6);     /* brighter raspberry for dark */
  --accent-press:  oklch(0.600 0.190 6);
  --accent-fg:     #ffffff;
  --accent-tint:   oklch(0.685 0.190 6 / 0.16);
  --accent-ring:   oklch(0.685 0.190 6 / 0.34);

  --bg:            #000000;
  --bg-grouped:    #000000;
  --surface:       #1c1c1e;
  --surface-2:     #2c2c2e;
  --surface-3:     #3a3a3c;

  --label:         #ffffff;
  --label-2:       rgba(235,235,245,0.60);
  --label-3:       rgba(235,235,245,0.30);
  --separator:     rgba(84,84,88,0.60);
  --fill:          rgba(120,120,128,0.24);
  --fill-2:        rgba(120,120,128,0.36);

  --success:       oklch(0.72 0.16 150);
  --success-tint:  oklch(0.72 0.16 150 / 0.20);
  --caution:       oklch(0.78 0.15 72);
  --caution-tint:  oklch(0.78 0.15 72 / 0.20);
  --destructive:   oklch(0.66 0.20 28);

  --shadow-raised:  0 1px 2px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.4);
  --shadow-overlay: 0 10px 30px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.5);
  color-scheme: dark;
}

/* keyframes shared by the capture states */
@keyframes ds-mic-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-ring); }
  70%  { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes ds-caret {
  0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; }
}
@keyframes ds-wave {
  0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); }
}
@keyframes ds-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; }
}