/* Calory — Design Tokens
 * Source of truth for all colors, radii, motion, and z-index.
 */

:root {
  /* Colors — Surface hierarchy */
  --bg: #09090b;
  --surface: #141416;
  --surface2: #1c1c20;
  --surface3: #23232d;
  --border: #262631;

  /* Accent */
  --accent: #f59e0b;
  --accent2: #fbbf24;
  --accent-dim: rgba(245, 158, 11, 0.08);

  /* Text */
  --text: #fafafa;
  --text-sub: #a1a1aa;
  --text-muted: #52525b;

  /* Status backgrounds */
  --green-bg: rgba(34, 197, 94, 0.06);
  --red-bg: rgba(239, 68, 68, 0.06);
  --orange-bg: rgba(249, 115, 22, 0.06);
  --accent-bg: rgba(245, 158, 11, 0.06);
  --violet-bg: rgba(139, 92, 246, 0.06);

  /* Hover/active states with colors */
  --hover-bg: rgba(255, 255, 255, 0.04);
  --active-bg: rgba(255, 255, 255, 0.06);
  --press-bg: rgba(255, 255, 255, 0.08);

  /* Border colors */
  --border-accent: rgba(245, 158, 11, 0.15);
  --border-green: rgba(34, 197, 94, 0.15);
  --border-red: rgba(239, 68, 68, 0.25);
  --border-red-hover: rgba(239, 68, 68, 0.5);
  --border-strong: #363645;

  /* Surface tints */
  --surface-glass: rgba(20, 20, 22, 0.95);

  /* Status */
  --green: #22c55e;
  --red: #ef4444;
  --orange: #f97316;
  --violet: #8b5cf6;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --transition-fast: 150ms;
  --transition-normal: 200ms;
  --transition-slow: 300ms;

  /* Elevation */
  --z-nav: 50;
  --z-modal: 100;
  --z-toast: 999;
  --z-splash: 10000;

  /* Motion durations used throughout the app */
  --page-transition: 180ms;
  --sheet-enter: 250ms;
  --sheet-exit: 180ms;
  --ring-fill: 800ms;
  --shimmer-speed: 1.5s;
}