/* Alawad premium theme tokens */
:root {
  --primary: #e32020;
  --primary-2: #ff4a4a;
  --accent: #1f7fd6;
  --accent-2: #4fb3ff;

  --neutral-0: #ffffff;
  --neutral-25: #fbfcfe;
  --neutral-50: #f6f8fb;
  --neutral-100: #edf1f6;
  --neutral-200: #dce4ee;
  --neutral-300: #c2ccd9;
  --neutral-500: #667386;
  --neutral-700: #303948;
  --neutral-800: #182231;
  --neutral-900: #0d1522;
  --navy-950: #070d17;

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-rtl: "Tajawal", "IBM Plex Sans Arabic", system-ui, sans-serif;

  --text-xs: 0.78rem;
  --text-sm: 0.91rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.36rem;
  --text-xl: 1.82rem;
  --text-2xl: 2.65rem;
  --text-3xl: 4.55rem;

  --leading-tight: 1.08;
  --leading-title: 1.16;
  --leading-body: 1.72;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6.5rem;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 42px;
  --radius-pill: 999px;
  --radius-full: 999px;

  --header-height: 84px;
  --header-height-mobile: 72px;

  --container-sm: 760px;
  --container-md: 1000px;
  --container-lg: 1180px;
  --container-xl: 1320px;

  --grid-gap: clamp(1rem, 2vw, 1.6rem);

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 160ms ease;
  --transition-base: 240ms ease;
  --transition-slow: 420ms cubic-bezier(.2,.8,.2,1);

  --z-base: 1;
  --z-header: 1000;
  --z-dropdown: 1050;
  --z-drawer: 1100;
  --z-modal: 1200;
  --z-floating: 1080;

  --focus-ring: 0 0 0 4px rgba(31, 127, 214, 0.18), 0 0 0 1px rgba(31, 127, 214, 0.55);
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-2));
  --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-2));
  --gradient-brand: linear-gradient(135deg, var(--primary), var(--primary-2) 44%, var(--accent) 100%);
  --gradient-red: var(--gradient-primary);
  --gradient-blue: var(--gradient-accent);
  --gradient-soft: radial-gradient(circle at top left, rgba(227,32,32,.16), transparent 32rem), radial-gradient(circle at bottom right, rgba(31,127,214,.16), transparent 34rem);
  --gradient-card: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.54));
  --gradient-dark-card: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  --gradient-line: linear-gradient(90deg, transparent, rgba(227, 32, 32, 0.58), rgba(31, 127, 214, 0.52), transparent);
  --gradient-hero: radial-gradient(circle at 12% 14%, rgba(227,32,32,.18), transparent 28%), radial-gradient(circle at 88% 12%, rgba(31,127,214,.18), transparent 32%), linear-gradient(180deg, rgba(255,255,255,.3), transparent);
  --glow-red: 0 0 56px rgba(227, 32, 32, 0.2);
  --glow-blue: 0 0 58px rgba(31, 127, 214, 0.2);
}

html[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f7f9fc;
  --color-bg-soft: #ffffff;
  --color-surface: rgba(255, 255, 255, 0.72);
  --color-surface-strong: rgba(255, 255, 255, 0.94);
  --color-elevated: #ffffff;
  --color-text: #111827;
  --color-heading: #0b1220;
  --color-muted: #5c687a;
  --color-muted-2: #8290a2;
  --color-border: rgba(15, 23, 42, 0.1);
  --color-border-strong: rgba(15, 23, 42, 0.17);
  --color-input: rgba(255, 255, 255, 0.9);
  --header-bg: rgba(255, 255, 255, 0.78);
  --footer-bg: #0b1220;
  --footer-text: rgba(255, 255, 255, 0.8);
  --glass-bg: rgba(255, 255, 255, 0.64);
  --glass-bg-strong: rgba(255, 255, 255, 0.84);
  --glass-border: rgba(255, 255, 255, 0.82);
  --shadow-xs: 0 8px 22px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 14px 36px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 24px 62px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 38px 94px rgba(15, 23, 42, 0.16);
  --hero-bg: radial-gradient(circle at 15% 8%, rgba(227,32,32,0.13), transparent 31%), radial-gradient(circle at 84% 18%, rgba(31,127,214,0.14), transparent 36%), linear-gradient(180deg, #ffffff 0%, #f7f9fc 90%);
  --soft-panel: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.62));
  --header-glow: radial-gradient(circle at 14% -10%, rgba(227,32,32,.22), transparent 34%), radial-gradient(circle at 86% -10%, rgba(31,127,214,.22), transparent 34%);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #070d17;
  --color-bg-soft: #0d1522;
  --color-surface: rgba(16, 24, 39, 0.66);
  --color-surface-strong: rgba(17, 27, 44, 0.94);
  --color-elevated: #111b2c;
  --color-text: rgba(244, 247, 251, 0.9);
  --color-heading: #ffffff;
  --color-muted: rgba(218, 226, 238, 0.72);
  --color-muted-2: rgba(218, 226, 238, 0.54);
  --color-border: rgba(255, 255, 255, 0.11);
  --color-border-strong: rgba(255, 255, 255, 0.18);
  --color-input: rgba(7, 13, 23, 0.62);
  --header-bg: rgba(7, 13, 23, 0.8);
  --footer-bg: #050912;
  --footer-text: rgba(255, 255, 255, 0.78);
  --glass-bg: rgba(17, 27, 44, 0.58);
  --glass-bg-strong: rgba(19, 31, 51, 0.82);
  --glass-border: rgba(255, 255, 255, 0.13);
  --shadow-xs: 0 10px 28px rgba(0, 0, 0, 0.26);
  --shadow-sm: 0 16px 42px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 28px 72px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 44px 110px rgba(0, 0, 0, 0.48);
  --hero-bg: radial-gradient(circle at 18% 8%, rgba(227,32,32,0.22), transparent 34%), radial-gradient(circle at 80% 15%, rgba(31,127,214,0.2), transparent 37%), linear-gradient(180deg, #070d17 0%, #0d1522 100%);
  --soft-panel: linear-gradient(180deg, rgba(22, 34, 55, 0.92), rgba(9, 16, 28, 0.66));
  --header-glow: radial-gradient(circle at 12% -10%, rgba(227,32,32,.22), transparent 34%), radial-gradient(circle at 86% -10%, rgba(31,127,214,.2), transparent 34%);
}