/* ============================================================
   DoughTracker — Design Tokens
   All values defined as CSS custom properties.
   Never hardcode a value — always use a token.
   ============================================================ */

:root {
  /* ===== BRAND ===== */
  --color-brand-50:  #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;

  /* ===== NEUTRAL ===== */
  --color-gray-0:   #ffffff;
  --color-gray-50:  #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  --color-gray-950: #020617;

  /* ===== SEMANTIC STATUS ===== */
  --color-success-light: #f0fdf4;
  --color-success:       #22c55e;
  --color-success-dark:  #16a34a;
  --color-warning-light: #fffbeb;
  --color-warning:       #f59e0b;
  --color-warning-dark:  #d97706;
  --color-danger-light:  #fef2f2;
  --color-danger:        #ef4444;
  --color-danger-dark:   #dc2626;
  --color-info-light:    #eff6ff;
  --color-info:          #3b82f6;
  --color-info-dark:     #2563eb;

  /* ===== TEMPERATURE SEMANTIC ===== */
  --temp-cold: #3b82f6;
  --temp-ok:   #22c55e;
  --temp-warm: #f59e0b;
  --temp-hot:  #ef4444;
  --temp-none: #94a3b8;

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-widest:   0.1em;

  /* ===== SPACING ===== */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ===== BORDER RADIUS ===== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm:    0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:    0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg:    0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl:    0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);
  --shadow-brand: 0 4px 14px 0 rgb(37 99 235 / 0.3);

  /* ===== TRANSITIONS ===== */
  --transition-fast:   100ms ease;
  --transition-base:   150ms ease;
  --transition-slow:   200ms ease;
  --transition-layout: 250ms ease;

  /* ===== LAYOUT CONSTANTS ===== */
  --sidebar-width:           240px;
  --sidebar-width-collapsed: 64px;
  --topnav-height:           56px;
  --bottomnav-height:        64px;

  /* ===== AVATAR COLORS (deterministic from username) ===== */
  --avatar-0: #6366f1;
  --avatar-1: #3b82f6;
  --avatar-2: #8b5cf6;
  --avatar-3: #10b981;
  --avatar-4: #f59e0b;
  --avatar-5: #f43f5e;
  --avatar-6: #14b8a6;
  --avatar-7: #f97316;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}