/* ============================================================
   Mustafa Haj — Neo-Classical Digital
   Core color + type tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:wght@300;400;500;600;700&family=Alexandria:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----- Brand colors ----- */
  --electric-purple: #4E3DC7;   /* primary action, brand */
  --electric-purple-deep: #361DB0;
  --electric-purple-tint: #5848D1;
  --vibrant-highlight: #E2DEFF;
  --vibrant-highlight-soft: #EFEDFF;
  --deep-purple-void: #0f0c28;  /* headings, structure */
  --light-gray-matrix: #F4F3F6; /* canvas */
  --pure-white: #FFFFFF;

  /* ----- Surface scale (from Material spec) ----- */
  --surface: #FAF9FC;
  --surface-dim: #DAD9DC;
  --surface-bright: #FAF9FC;
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #F4F3F6;
  --surface-container: #EEEDF0;
  --surface-container-high: #E8E8EB;
  --surface-container-highest: #E3E2E5;

  /* ----- Foreground / content ----- */
  --on-surface: #1A1C1E;
  --on-surface-variant: #474554;
  --outline: #787585;
  --outline-variant: #C8C4D6;
  --inverse-surface: #2F3033;
  --inverse-on-surface: #F1F0F3;

  /* ----- Semantic ----- */
  --primary: #361DB0;
  --on-primary: #FFFFFF;
  --primary-container: #4E3DC7;
  --on-primary-container: #CAC4FF;
  --secondary: #5D5B77;
  --on-secondary: #FFFFFF;
  --secondary-container: #E0DCFD;
  --on-secondary-container: #62607B;
  --tertiary: #3A3772;
  --on-tertiary: #FFFFFF;
  --tertiary-container: #524E8B;
  --error: #BA1A1A;
  --on-error: #FFFFFF;
  --error-container: #FFDAD6;
  --on-error-container: #93000A;
  --success: #1F8A5B;
  --warning: #B07406;

  /* ----- Type families ----- */
  --font-display: 'Anton', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body: 'Montserrat', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-meta: 'Alexandria', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-arabic: 'IBM Plex Sans Arabic', system-ui, sans-serif;

  /* ----- Type scale ----- */
  --text-display-xl: clamp(72px, 10vw, 144px);
  --text-display-lg: 96px;
  --text-display-md: 72px;
  --text-headline-xl: 56px;
  --text-headline-lg: 40px;
  --text-headline-md: 28px;
  --text-headline-sm: 22px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-label-md: 13px;
  --text-label-sm: 11px;

  /* ----- Radii (pill-shaped language) ----- */
  --radius-sm: 0.5rem;     /* 8 */
  --radius-default: 1rem;  /* 16 */
  --radius-md: 1.5rem;     /* 24  — interactive */
  --radius-lg: 2rem;       /* 32  — cards */
  --radius-xl: 3rem;       /* 48 */
  --radius-full: 9999px;

  /* ----- Spacing (16px grid) ----- */
  --grid: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --gutter: 24px;
  --margin-mobile: 16px;
  --margin-desktop: 48px;

  /* ----- Elevation: subtle glows + glass ----- */
  --shadow-glow-primary: 0 0 0 1px rgba(78, 61, 199, 0.18), 0 12px 32px -8px rgba(78, 61, 199, 0.45);
  --shadow-glow-primary-soft: 0 0 0 1px rgba(78, 61, 199, 0.12), 0 8px 24px -10px rgba(78, 61, 199, 0.28);
  --shadow-card: 0 1px 0 rgba(8, 0, 65, 0.04), 0 8px 24px -12px rgba(8, 0, 65, 0.10);
  --shadow-card-lifted: 0 12px 40px -16px rgba(8, 0, 65, 0.18);
  --shadow-inset-outline: inset 0 0 0 1px rgba(8, 0, 65, 0.10);
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-blur: blur(16px) saturate(140%);

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 380ms;

  /* ----- Grid scaffolding background ----- */
  --grid-dot: rgba(8, 0, 65, 0.06);
  --grid-line: rgba(8, 0, 65, 0.04);
}

/* ============================================================
   Reset-lite + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic type
   ============================================================ */
.display, .h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-display-lg);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--deep-purple-void);
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-headline-xl);
  line-height: 1.0;
  letter-spacing: -0.005em;
  color: var(--deep-purple-void);
  text-transform: uppercase;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-headline-lg);
  line-height: 1.05;
  color: var(--electric-purple);
  text-transform: uppercase;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-headline-md);
  line-height: 1.2;
  color: var(--deep-purple-void);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-headline-sm);
  line-height: 1.3;
  color: var(--on-surface);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body-md);
  line-height: 1.6;
  color: var(--on-surface-variant);
  margin: 0;
}

.body-lg { font-size: var(--text-body-lg); line-height: 1.6; }
.body-sm { font-size: var(--text-body-sm); line-height: 1.5; }

.meta, .label {
  font-family: var(--font-meta);
  font-weight: 500;
  font-size: var(--text-label-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

.eyebrow {
  font-family: var(--font-meta);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--electric-purple);
}

/* Accent color tokens */
.fg-primary { color: var(--electric-purple); }
.fg-void    { color: var(--deep-purple-void); }
.fg-muted   { color: var(--on-surface-variant); }

/* ============================================================
   Grid canvas background (decorative)
   ============================================================ */
.bg-matrix {
  background:
    radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 1.5px) 0 0 / 16px 16px,
    var(--light-gray-matrix);
}

.bg-blueprint {
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--surface);
}