/**
 * css/tokens.css — Design System Tokens
 */
@font-face {
  font-family: 'Vazirmatn';
  src: local('Vazirmatn'), local('Vazir'), local('Tahoma');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Inter'), local('SF Pro Text'), local('Roboto'), local('Segoe UI');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-fa: 'Vazirmatn', system-ui, -apple-system, sans-serif;
  --font-en: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --leading-tight: 1.3;
  --leading-normal: 1.65;
  --leading-relaxed: 1.75;

  --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;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  --touch-min: 44px;
  --app-max-width: 480px;
  --bottom-nav-height: 72px;
  --top-bar-height: 64px;

  --dur-fast: 150ms;
  --dur-normal: 280ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --bg-canvas: #f4f6fb;
  --bg-gradient-1: rgba(79, 70, 229, 0.10);
  --bg-gradient-2: rgba(6, 182, 212, 0.10);
  --surface-card: rgba(255, 255, 255, 0.84);
  --surface-elevated: #ffffff;
  --surface-muted: #eef2f9;
  --surface-glass-border: rgba(255, 255, 255, 0.75);
  --border-subtle: rgba(15, 23, 42, 0.09);
  --border-focus: #4f46e5;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-on-accent: #ffffff;

  --accent-primary: #4f46e5;
  --accent-primary-hover: #4338ca;
  --accent-primary-soft: rgba(79, 70, 229, 0.12);

  --accent-cyan: #0891b2;
  --accent-cyan-soft: rgba(8, 145, 178, 0.12);

  --color-success: #059669;
  --color-success-soft: rgba(5, 150, 105, 0.14);

  --color-warning: #d97706;
  --color-warning-soft: rgba(217, 119, 6, 0.14);

  --color-danger: #dc2626;
  --color-danger-soft: rgba(220, 38, 38, 0.14);

  --shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 12px 28px -6px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.15);
  --glass-blur: blur(16px);
}

[data-theme="dark"] {
  --bg-canvas: #0b0f19;
  --bg-gradient-1: rgba(99, 102, 241, 0.16);
  --bg-gradient-2: rgba(6, 182, 212, 0.12);
  --surface-card: rgba(22, 31, 51, 0.78);
  --surface-elevated: #1e293b;
  --surface-muted: #151e31;
  --surface-glass-border: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.09);
  --border-focus: #818cf8;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-on-accent: #ffffff;

  --accent-primary: #6366f1;
  --accent-primary-hover: #818cf8;
  --accent-primary-soft: rgba(99, 102, 241, 0.18);

  --accent-cyan: #22d3ee;
  --accent-cyan-soft: rgba(34, 211, 238, 0.16);

  --color-success: #10b981;
  --color-success-soft: rgba(16, 185, 129, 0.2);

  --color-warning: #f59e0b;
  --color-warning-soft: rgba(245, 158, 11, 0.2);

  --color-danger: #f87171;
  --color-danger-soft: rgba(248, 113, 113, 0.2);

  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 28px -6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.65);
}