/* Local Arabic Font System */
@font-face {
  font-family: 'DG Bebo';
  src: url('../fonts/DG-Bebo-B.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'adoody';
  src: url('../fonts/adoody.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Rooyin';
  src: url('../fonts/RooyinFree-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FF Malmoom';
  src: url('../fonts/FFMalmoom-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Theme tokens for Modern Enterprise Design System */
:root {
  /* Restrained SaaS Brand Colors */
  --brand-navy: #081B33;
  --brand-orange: #FF5A45;
  --brand-cyan: #2EC7F0;
  --brand-purple: #7A5AF8;
  --brand-blue: #2563EB;
  --brand-bg: #FFFFFF;
  --brand-text: #0F172A;

  /* Theme color mapping */
  --background: 252 251 255;
  /* #FCFBFF */
  --on-background: 15 23 42;
  /* #0F172A */

  --surface: 255 255 255;
  --surface-dim: 249 250 251;
  /* #F9FAFB */
  --surface-bright: 255 255 255;

  --surface-container-lowest: 255 255 255;
  --surface-container-low: 249 250 251;
  --surface-container: 243 244 246;
  /* #F3F4F6 */
  --surface-container-high: 229 231 235;
  --surface-container-highest: 8 27 51;
  /* #081B33 Navy */

  --surface-variant: 243 244 246;
  --on-surface: 15 23 42;
  --on-surface-variant: 71 85 105;
  /* #475569 secondary text */

  --outline: 226 232 240;
  /* #E2E8F0 */
  --outline-variant: 241 245 249;
  /* #F1F5F9 */

  /* Fonts */
  --font-primary: 'Alyamama Variable', 'Alyamama', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-alyamama: 'Alyamama Variable', 'Alyamama', system-ui, sans-serif;
  --font-alexandria: 'Alexandria', system-ui, sans-serif;
  --font-arabic: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;

  /* Layout Spacing scale */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  --spacing-5xl: 128px;

  /* Borders and Border Radius */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --border-width-thin: 1px;

  /* Shadows (Sleek SaaS Depth) */
  --shadow-sm: 0 1px 2px 0 rgba(8, 27, 51, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(8, 27, 51, 0.04), 0 2px 4px -1px rgba(8, 27, 51, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(8, 27, 51, 0.04), 0 4px 6px -2px rgba(8, 27, 51, 0.02);
  --shadow-xl: 0 20px 25px -5px rgba(8, 27, 51, 0.05), 0 10px 10px -5px rgba(8, 27, 51, 0.03);
  --shadow-glow: 0 0 24px 0 rgba(37, 99, 235, 0.08);
  --shadow-glass: 0 8px 32px 0 rgba(8, 27, 51, 0.03);

  /* Creative Neubrutalism Design Tokens */
  --neo-border-color: #081B33;
  --neo-shadow-color: #081B33;
  --neo-shadow-sm: 2px 2px 0px var(--neo-shadow-color);
  --neo-shadow-md: 4px 4px 0px var(--neo-shadow-color);
  --neo-shadow-lg: 7px 7px 0px var(--neo-shadow-color);
  --neo-shadow-xl: 10px 10px 0px var(--neo-shadow-color);
}

.dark {
  --brand-bg: #030712;
  --brand-text: #F9FAFB;

  --background: 3 7 18;
  /* #030712 */
  --on-background: 249 250 251;
  /* #F9FAFB */

  --surface: 11 15 25;
  /* #0B0F19 */
  --surface-dim: 8 27 51;
  /* #081B33 */
  --surface-bright: 27 38 59;

  --surface-container-lowest: 11 15 25;
  --surface-container-low: 8 27 51;
  --surface-container: 17 24 39;
  --surface-container-high: 31 41 55;
  --surface-container-highest: 249 250 251;

  --surface-variant: 17 24 39;
  --on-surface: 249 250 251;
  --on-surface-variant: 156 163 175;

  --outline: 31 41 55;
  --outline-variant: 55 65 81;

  /* Shadows (Dark Glow) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 24px 0 rgba(59, 130, 246, 0.12);
  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

  /* Creative Neubrutalism Design Tokens - Dark Mode */
  --neo-border-color: #ffffff;
  --neo-shadow-color: #ffffff;
  --neo-shadow-sm: 2px 2px 0px var(--neo-shadow-color);
  --neo-shadow-md: 4px 4px 0px var(--neo-shadow-color);
  --neo-shadow-lg: 7px 7px 0px var(--neo-shadow-color);
  --neo-shadow-xl: 10px 10px 0px var(--neo-shadow-color);
}