/* Design Tokens for Naat Website - Modern UI */
/* Color scheme, typography, spacing, radii, shadows */

:root {
  color-scheme: light dark;

  /* Fonts */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-serif-urdu: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', 'Scheherazade New', serif;

  /* Colors */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc; /* slate-50 */
  --color-text: #0f172a;      /* slate-900 */
  --color-muted: #64748b;     /* slate-500 */
  --color-border: #e5e7eb;    /* gray-200 */

  --color-primary: #3b82f6;   /* blue-500 */
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  --color-accent: #8b5cf6;    /* violet-500 */
  --color-success: #10b981;   /* emerald-500 */
  --color-warning: #f59e0b;   /* amber-500 */
  --color-danger: #ef4444;    /* red-500 */

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 40px rgba(0,0,0,0.16);

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 20px;

  /* Transitions */
  --ease-std: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-quick: 120ms var(--ease-std);
  --transition-std: 220ms var(--ease-std);
  --transition-slow: 380ms var(--ease-std);

  /* Typography scale (fluid) */
  --step--1: clamp(0.78rem, 0.75rem + 0.2vw, 0.9rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.3vw, 1rem);
  --step-1: clamp(1.1rem, 1rem + 0.6vw, 1.25rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.9vw, 1.5rem);
  --step-3: clamp(1.6rem, 1.4rem + 1.1vw, 1.9rem);
  --step-4: clamp(2rem, 1.8rem + 1.6vw, 2.5rem);
  --step-5: clamp(2.5rem, 2.2rem + 2.2vw, 3.2rem);
}

/* Dark mode tokens using existing .dark-mode toggle */
.dark-mode, [data-theme="dark"] {
  --color-bg: #0b1220;       /* near slate-950 */
  --color-surface: #0f172a;  /* slate-900 */
  --color-surface-2: #111827;/* gray-900 */
  --color-text: #e5e7eb;     /* gray-200 */
  --color-muted: #94a3b8;    /* slate-400 */
  --color-border: #1f2937;   /* gray-800 */

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 6px 14px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
}

/* Respect user's system preference if no explicit toggle */
@media (prefers-color-scheme: dark) {
  :root:not(.force-light) {
    --color-bg: #0b1220;
    --color-surface: #0f172a;
    --color-surface-2: #111827;
    --color-text: #e5e7eb;
    --color-muted: #94a3b8;
    --color-border: #1f2937;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-md: 0 6px 14px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
  }
}