/* Design Tokens - Auto-generated */
/* Do not edit directly - modify tokens.json instead */

/* === PRIMITIVES === */
:root {
  --primitive-color-emerald-50: #ECFDF5;
  --primitive-color-emerald-100: #D1FAE5;
  --primitive-color-emerald-200: #A7F3D0;
  --primitive-color-emerald-300: #6EE7B7;
  --primitive-color-emerald-400: #34D399;
  --primitive-color-emerald-500: #10B981;
  --primitive-color-emerald-600: #059669;
  --primitive-color-emerald-700: #047857;
  --primitive-color-emerald-800: #065F46;
  --primitive-color-emerald-900: #064E3B;
  --primitive-color-blue-50: #EFF6FF;
  --primitive-color-blue-100: #DBEAFE;
  --primitive-color-blue-400: #60A5FA;
  --primitive-color-blue-500: #3B82F6;
  --primitive-color-blue-600: #2563EB;
  --primitive-color-amber-50: #FFFBEB;
  --primitive-color-amber-100: #FEF3C7;
  --primitive-color-amber-400: #FBBF24;
  --primitive-color-amber-500: #F59E0B;
  --primitive-color-amber-600: #D97706;
  --primitive-color-amber-orange: #FFA94D;
  --primitive-color-slate-50: #F8FAFC;
  --primitive-color-slate-100: #F1F5F9;
  --primitive-color-slate-200: #E2E8F0;
  --primitive-color-slate-300: #CBD5E1;
  --primitive-color-slate-400: #94A3B8;
  --primitive-color-slate-500: #64748B;
  --primitive-color-slate-700: #334155;
  --primitive-color-slate-800: #1E293B;
  --primitive-color-slate-900: #0F172A;
  --primitive-color-slate-950: #020617;
  --primitive-color-dark-base: #030712;
  --primitive-color-dark-surface: #0B0F19;
  --primitive-color-dark-surface-raised: #111827;
  --primitive-color-dark-card: #16211D;
  --primitive-color-dark-card-hover: #1A2E26;
  --primitive-color-red-500: #EF4444;
  --primitive-color-red-600: #DC2626;
  --primitive-color-white: #FFFFFF;
  --primitive-color-black: #000000;
  --primitive-spacing-0: 0;
  --primitive-spacing-1: 0.25rem;
  --primitive-spacing-2: 0.5rem;
  --primitive-spacing-3: 0.75rem;
  --primitive-spacing-4: 1rem;
  --primitive-spacing-5: 1.25rem;
  --primitive-spacing-6: 1.5rem;
  --primitive-spacing-8: 2rem;
  --primitive-spacing-10: 2.5rem;
  --primitive-spacing-12: 3rem;
  --primitive-spacing-16: 4rem;
  --primitive-spacing-20: 5rem;
  --primitive-fontSize-xs: 0.75rem;
  --primitive-fontSize-sm: 0.8125rem;
  --primitive-fontSize-base: 0.875rem;
  --primitive-fontSize-md: 0.9375rem;
  --primitive-fontSize-lg: 1rem;
  --primitive-fontSize-xl: 1.125rem;
  --primitive-fontSize-2xl: 1.375rem;
  --primitive-fontSize-3xl: 1.75rem;
  --primitive-fontSize-4xl: 2.25rem;
  --primitive-fontSize-display: clamp(2.5rem, 5.5vw, 4.25rem);
  --primitive-fontFamily-arabic: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --primitive-fontFamily-latin: 'Outfit', 'IBM Plex Sans Arabic', sans-serif;
  --primitive-fontFamily-mono: 'JetBrains Mono', monospace;
  --primitive-fontWeight-regular: 400;
  --primitive-fontWeight-medium: 500;
  --primitive-fontWeight-semibold: 600;
  --primitive-fontWeight-bold: 700;
  --primitive-fontWeight-extrabold: 800;
  --primitive-radius-sm: 8px;
  --primitive-radius-md: 12px;
  --primitive-radius-lg: 16px;
  --primitive-radius-xl: 20px;
  --primitive-radius-2xl: 24px;
  --primitive-radius-pill: 9999px;
  --primitive-shadow-sm: 0 1px 2px rgba(0,0,0,0.15);
  --primitive-shadow-card: 0 10px 25px rgba(0,0,0,0.15);
  --primitive-shadow-card-hover: 0 15px 35px rgba(0,0,0,0.3);
  --primitive-shadow-glow-emerald: 0 4px 15px rgba(16,185,129,0.3);
  --primitive-shadow-glow-blue: 0 4px 15px rgba(59,130,246,0.3);
  --primitive-duration-fast: 150ms;
  --primitive-duration-normal: 250ms;
  --primitive-duration-slow: 350ms;
  --primitive-blur-glass: 15px;
  --primitive-blur-glass-strong: 25px;
}

/* === SEMANTIC === */
:root {
  --color-background: #030712;
  --color-surface: #0B0F19;
  --color-surface-raised: #111827;
  --color-card: #16211D;
  --color-foreground: #F8FAFC;
  --color-foreground-muted: #CBD5E1;
  --color-muted: #94A3B8;
  --color-muted-foreground: #94A3B8;
  --color-primary: #10B981;
  --color-primary-hover: #059669;
  --color-primary-foreground: #FFFFFF;
  --color-secondary: #3B82F6;
  --color-secondary-foreground: #FFFFFF;
  --color-accent: #FFA94D;
  --color-accent-foreground: #030712;
  --color-destructive: #DC2626;
  --color-success: #10B981;
  --color-border: rgba(255,255,255,0.05);
  --color-border-strong: rgba(255,255,255,0.12);
  --color-border-glass: rgba(255,255,255,0.05);
  --color-ring: #10B981;
  --spacing-section: 4rem;
  --spacing-card-gap: 1.5rem;
  --spacing-component: 1rem;
  --radius-card: 20px;
  --radius-button: 9999px;
  --radius-badge: 9999px;
  --radius-input: 12px;
}

/* === COMPONENTS === */
:root {
  --button-primary-bg: #10B981;
  --button-primary-bg-hover: #059669;
  --button-primary-fg: #FFFFFF;
  --button-secondary-bg: rgba(255,255,255,0.06);
  --button-accent-bg: #FFA94D;
  --button-accent-fg: #030712;
  --button-padding-x: 1.25rem;
  --button-padding-y: 0.75rem;
  --button-radius: 9999px;
  --button-font-size: 0.875rem;
  --button-shadow: 0 4px 15px rgba(16,185,129,0.3);
  --card-bg: rgba(15,23,42,0.45);
  --card-bg-hover: rgba(15,23,42,0.70);
  --card-border: rgba(255,255,255,0.05);
  --card-border-hover: rgba(255,255,255,0.12);
  --card-shadow: 0 10px 25px rgba(0,0,0,0.15);
  --card-shadow-hover: 0 15px 35px rgba(0,0,0,0.3);
  --card-padding: 1.5rem;
  --card-radius: 20px;
  --card-blur: 15px;
  --badge-bg: rgba(16,185,129,0.08);
  --badge-border: rgba(16,185,129,0.20);
  --badge-fg: #10B981;
  --badge-accent-bg: #FFA94D;
  --badge-accent-fg: #030712;
  --badge-padding-x: 1rem;
  --badge-padding-y: 0.25rem;
  --badge-radius: 9999px;
  --badge-font-size: 0.75rem;
  --input-bg: #111827;
  --input-border: rgba(255,255,255,0.05);
  --input-focus-border: #10B981;
  --input-focus-ring: #10B981;
  --input-placeholder: #94A3B8;
  --input-padding-x: 1rem;
  --input-padding-y: 0.75rem;
  --input-radius: 12px;
  --header-bg: rgba(3,7,18,0.5);
  --header-bg-scrolled: rgba(3,7,18,0.85);
  --header-border: rgba(255,255,255,0.05);
  --header-blur: 20px;
  --header-radius: 9999px;
  --icon-primary: #10B981;
  --icon-secondary: #3B82F6;
  --icon-accent: #FFA94D;
  --icon-muted: #94A3B8;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 28px;
}