/* =============================================================
   EventPlus Design System — Tokens + Semantic Type
   -------------------------------------------------------------
   Typography
   - PRIMARY: IBM Plex Sans Arabic — bi-script (Arabic + Latin),
     the brand face. Use for all UI, body, and most headings.
     Works natively in RTL interfaces (a core EP product pillar).
   - SECONDARY: Inter — used only as a fallback and for dense
     tabular/numeric blocks where Inter's wider Latin forms read
     slightly better. Keep usage minimal.
   Weights shipped: 100 Thin, 200 ExtraLight, 300 Light, 400 Regular,
     500 Medium, 600 SemiBold, 700 Bold.
   ============================================================= */

/* Inter import removed — FatimahArabic only */

/* IBM Plex Sans Arabic — brand typeface (bi-script) */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/IBMPlexSansArabic-Thin.woff2') format('woff2'), url('./fonts/IBMPlexSansArabic-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/IBMPlexSansArabic-ExtraLight.woff2') format('woff2'), url('./fonts/IBMPlexSansArabic-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/IBMPlexSansArabic-Light.woff2') format('woff2'), url('./fonts/IBMPlexSansArabic-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/IBMPlexSansArabic-Regular.woff2') format('woff2'), url('./fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/IBMPlexSansArabic-Medium.woff2') format('woff2'), url('./fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2'), url('./fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('./fonts/IBMPlexSansArabic-Bold.woff2') format('woff2'), url('./fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
}

:root {
  /* --- COLOR: brand --- */
  --ep-accent:         #1E4668;
  --ep-accent-hover:   #255280;
  --ep-accent-2:       #2D6A9F;   /* lighter stop in the brand gradient */
  --ep-accent-gradient: linear-gradient(135deg, #1E4668 0%, #2D6A9F 100%);
  --ep-accent-tint-10: rgba(30, 70, 104, 0.10);
  --ep-accent-tint-15: rgba(30, 70, 104, 0.15);
  --ep-accent-tint-20: rgba(30, 70, 104, 0.20);
  --ep-accent-glow:    0 8px 30px rgba(30, 70, 104, 0.40);

  /* --- COLOR: neutrals (light theme) --- */
  --ep-bg-1:           #FFFFFF;   /* page bg */
  --ep-bg-2:           #F5F5F7;   /* secondary surface / section break */
  --ep-bg-dark:        #000000;   /* product-showcase band */
  --ep-fg-1:           #1D1D1F;   /* primary text */
  --ep-fg-2:           #6E6E73;   /* muted / secondary text */
  --ep-fg-on-dark:     #FFFFFF;
  --ep-fg-on-dark-2:   rgba(255,255,255,0.65);
  --ep-fg-on-dark-3:   rgba(255,255,255,0.50);

  /* --- COLOR: semantic (from mockup traffic lights) --- */
  --ep-success:        #28C840;   /* "Normal" */
  --ep-warning:        #FEBC2E;   /* "High" */
  --ep-critical:       #FF5F57;   /* "Alert" */
  --ep-whatsapp:       #25D366;   /* external brand — CTA only */

  /* --- COLOR: glass & borders --- */
  --ep-glass-bg:       rgba(255, 255, 255, 0.72);
  --ep-glass-border:   rgba(255, 255, 255, 0.30);
  --ep-hairline:       rgba(0, 0, 0, 0.08);

  /* --- TYPE --- */
  --ep-font-sans: 'FatimahArabic', sans-serif;
  --ep-font-display: var(--ep-font-sans);
  --ep-font-latin-alt: 'FatimahArabic', sans-serif;
  --ep-font-mono: 'FatimahArabic', sans-serif;

  /* --- RADII --- */
  --ep-radius:         18px;   /* default card */
  --ep-radius-sm:      12px;   /* inputs, mini chips */
  --ep-radius-xs:      10px;   /* logo mark, tiny chips */
  --ep-radius-icon:    14px;   /* icon tiles */
  --ep-radius-icon-lg: 20px;   /* large product visuals */
  --ep-radius-pill:    980px;  /* signature pill buttons */

  /* --- SPACING (the values recurring in the codebase) --- */
  --ep-space-1: 4px;
  --ep-space-2: 8px;
  --ep-space-3: 12px;
  --ep-space-4: 16px;
  --ep-space-5: 20px;
  --ep-space-6: 24px;
  --ep-space-7: 32px;
  --ep-space-8: 48px;
  --ep-space-9: 64px;
  --ep-space-10: 80px;
  --ep-space-11: 100px;
  --ep-container: 1200px;

  /* --- SHADOWS --- */
  --ep-shadow-sm: 0 2px 20px rgba(0, 0, 0, 0.08);
  --ep-shadow-md: 0 8px 40px rgba(0, 0, 0, 0.12);
  --ep-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);

  /* --- MOTION --- */
  --ep-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ep-transition: all 0.4s var(--ep-ease);
  --ep-transition-fast: all 0.2s var(--ep-ease);
}

/* Dark theme (triggered by [data-theme="dark"] like the source site) */
[data-theme="dark"] {
  --ep-bg-1:         #000000;
  --ep-bg-2:         #1C1C1E;
  --ep-fg-1:         #F5F5F7;
  --ep-fg-2:         #A1A1A6;
  --ep-glass-bg:     rgba(28, 28, 30, 0.72);
  --ep-glass-border: rgba(255, 255, 255, 0.10);
  --ep-hairline:     rgba(255, 255, 255, 0.10);
  --ep-shadow-sm: 0 2px 20px rgba(0, 0, 0, 0.30);
  --ep-shadow-md: 0 8px 40px rgba(0, 0, 0, 0.40);
  --ep-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.50);
}

/* =============================================================
   BASE
   ============================================================= */
body {
  font-family: var(--ep-font-sans);
  color: var(--ep-fg-1);
  background: var(--ep-bg-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =============================================================
   SEMANTIC TYPE
   — Match the classes used across the EventPlus codebase.
   ============================================================= */

/* Display */
.ep-display-xl, h1.ep-h1 {
  font-family: var(--ep-font-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.ep-display-lg, h1.ep-h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.ep-display-md, h2.ep-h2 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ep-display-sm, h3.ep-h3 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* Card titles / content headings */
.ep-h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.ep-h5 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.4; }
.ep-h6 { font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.4; }

/* Body */
.ep-body-lg, p.ep-lead {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 400;
  line-height: 1.7;
}
.ep-body-md, p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
}
.ep-body-sm { font-size: 15px; line-height: 1.6; }
.ep-caption { font-size: 13px; line-height: 1.5; color: var(--ep-fg-2); }
.ep-micro { font-size: 12px; line-height: 1.4; color: var(--ep-fg-2); }

/* Eyebrow (CAPS) — the section label */
.ep-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ep-accent);
}

/* Gradient text accent (for one phrase in a hero) */
.ep-gradient-text {
  background: var(--ep-accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Numbers — the brand's stat showpiece */
.ep-stat-number {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ep-accent);
}
.ep-stat-number.ep-gradient { background: var(--ep-accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Code / mono */
code, .ep-code {
  font-family: var(--ep-font-mono);
  font-size: 0.92em;
  background: var(--ep-bg-2);
  padding: 2px 6px;
  border-radius: var(--ep-radius-xs);
}

/* Utility colors */
.ep-text-muted { color: var(--ep-fg-2); }
.ep-text-accent { color: var(--ep-accent); }
.ep-text-on-dark { color: var(--ep-fg-on-dark); }