/**
 * WAZAIF COUNTER — DESIGN SYSTEM TOKENS (CSS VARIABLES)
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Amiri:wght@400;700&family=Scheherazade+New:wght@600;700&display=swap');

:root {
  /* Fonts */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-quran: 'Amiri', 'Traditional Arabic', serif;
  --font-indopak: 'Scheherazade New', 'Amiri', 'Traditional Arabic', serif;

  /* Typography Scale */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --font-size-sm: clamp(0.875rem, 0.83rem + 0.25vw, 0.9375rem);
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --font-size-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --font-size-lg: clamp(1.35rem, 1.25rem + 0.5vw, 1.5rem);
  --font-size-xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --font-size-2xl: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);
  --font-size-display: clamp(2.85rem, 2.2rem + 2.8vw, 4.5rem);

  /* Light Theme Colors */
  --bg-primary: #f6faf8;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #eef6f2;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-glass-card: rgba(255, 255, 255, 0.75);
  
  --text-primary: #0b1915;
  --text-secondary: #3b5049;
  --text-muted: #5e756e;
  --text-on-primary: #ffffff;

  --primary-50: #ecfdf5;
  --primary-100: #d1fae5;
  --primary-500: #10b981;
  --primary-600: #059669;
  --primary-700: #047857;
  --primary-800: #065f46;
  --primary-900: #043829;

  --primary: var(--primary-700);
  --primary-hover: var(--primary-800);
  --primary-glow: rgba(4, 120, 87, 0.16);

  --accent: #d97706;
  --accent-light: #f59e0b;
  --accent-subtle: #fef3c7;

  --border-color: #dbe7e2;
  --border-color-subtle: #edf4f0;

  --status-success: #059669;
  --status-warning: #d97706;
  --status-danger: #dc2626;
  --status-info: #0284c7;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 18px rgba(4, 120, 87, 0.08);
  --shadow-lg: 0 16px 36px rgba(4, 120, 87, 0.12);
  --shadow-glow: 0 0 35px rgba(5, 150, 105, 0.22);
  --shadow-glow-lg: 0 10px 45px rgba(5, 150, 105, 0.35);

  /* Spacing */
  --container-max: 1200px;
  --header-height: 78px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --bg-primary: #06110e;
  --bg-surface: #0e1c18;
  --bg-surface-elevated: #152722;
  --bg-glass: rgba(14, 28, 24, 0.85);
  --bg-glass-card: rgba(14, 28, 24, 0.7);

  --text-primary: #f8fafc;
  --text-secondary: #c2d4ce;
  --text-muted: #8ba59d;
  --text-on-primary: #06110e;

  --primary: var(--primary-500);
  --primary-hover: var(--primary-600);
  --primary-glow: rgba(16, 185, 129, 0.28);

  --accent: #f59e0b;
  --accent-light: #fbbf24;
  --accent-subtle: rgba(245, 158, 11, 0.15);

  --border-color: #1e362f;
  --border-color-subtle: #142823;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 45px rgba(16, 185, 129, 0.35);
  --shadow-glow-lg: 0 12px 55px rgba(16, 185, 129, 0.45);
}