/* Ion Media webfonts — Google-hosted substitutes (no binaries were provided; see readme CAVEATS) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@300..800&family=JetBrains+Mono:wght@400;500;600&family=Noto+Naskh+Arabic:wght@400..700&family=Noto+Sans+Arabic:wght@300..800&display=swap');

:root{
/* Base palette */
--ion-red:#C13E4F;
--ion-red-deep:#A43B34; /* dusty red — hover / pressed */
--charcoal:#2A2A2A;
--off-white:#F5F5F6; /* soft neutral grey-white — page */
--warm-gray:#E7E7E9; /* soft grey — borders, quiet surfaces */
--red-tint:#F6E3E6;
--white:#FFFFFF;
--ink-2:#67696E; /* secondary text */
--ink-3:#9A9CA1; /* tertiary / placeholder */
/* Semantic */
--surface-page:var(--off-white);
--surface-card:var(--white);
--surface-raised:#FAFAFB; /* card on white */
--surface-tint:var(--red-tint);
--surface-inverse:var(--charcoal);
--text-primary:var(--charcoal);
--text-secondary:var(--ink-2);
--text-tertiary:var(--ink-3);
--text-inverse:var(--off-white);
--accent:var(--ion-red);
--accent-hover:var(--ion-red-deep);
--accent-on:var(--white); /* text on accent */
--border-hairline:rgba(42,42,42,.14);
--border-soft:var(--warm-gray);
--focus-ring:0 0 0 2px var(--off-white),0 0 0 4px var(--ion-red);
--selection:var(--red-tint);
}

:root{
/* Families */
--font-display:'Playfair Display',Georgia,serif;      /* EN display */
--font-sans:'Inter',-apple-system,'Helvetica Neue',sans-serif; /* EN primary */
--font-mono:'JetBrains Mono',ui-monospace,monospace;  /* EN technical */
--font-arabic-display:'Noto Naskh Arabic',serif;      /* AR display (Naskh — خط النسخ) */
--font-arabic:'Noto Sans Arabic',sans-serif;          /* AR body/UI */
/* Scale (desktop) */
--text-display-xl:clamp(48px,5vw,72px); /* hero */
--text-display:48px;   /* section headline */
--text-h2:34px;
--text-h3:22px;
--text-body-lg:18px;
--text-body:16px;
--text-small:14px;
--text-caption:12px;   /* mono, letterspaced */
--text-kicker:12px;    /* uppercase eyebrow */
/* Leading */
--leading-display:1.12;
--leading-tight:1.25;
--leading-body:1.6;
/* Tracking */
--tracking-kicker:.18em;
--tracking-caption:.12em;
--tracking-wide:.08em;
/* Weights */
--weight-display:400;  /* Playfair regular; italic for accent word */
--weight-body:400;
--weight-medium:500;
--weight-semibold:600;
}

:root{
/* Spacing — 4px base */
--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;--space-10:128px;
--section-gap:var(--space-10); /* whitespace leads */
/* Grid (from brand layout system) */
--grid-max:1440px;
--grid-margin:80px;
--grid-gutter:24px;
--grid-cols:12; /* @kind other */
/* Radii — soft corners, quiet sophistication */
--radius-sm:6px;
--radius-md:12px;
--radius-lg:20px;
--radius-pill:999px;
/* Hairlines */
--rule:1px solid var(--border-hairline);
/* Shadows — quiet, warm, low */
--shadow-card:0 1px 2px rgba(42,42,42,.05),0 4px 16px rgba(42,42,42,.05);
--shadow-lift:0 2px 6px rgba(42,42,42,.06),0 16px 40px rgba(42,42,42,.10);
--shadow-dialog:0 24px 64px rgba(42,42,42,.18);
/* Motion — the line moves with purpose */
--ease-brand:cubic-bezier(.65,0,.35,1); /* @kind other */
--dur-fast:160ms; /* @kind other */
--dur-med:320ms; /* @kind other */
--dur-slow:600ms; /* @kind other */
}

body{background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;margin:0}
::selection{background:var(--selection);color:var(--charcoal)}
a{color:var(--charcoal);text-decoration:none;transition:color var(--dur-fast) var(--ease-brand)}
a:hover{color:var(--accent)}
[lang="ar"],[dir="rtl"]{font-family:var(--font-arabic)}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--weight-display);line-height:var(--leading-display);margin:0}
h1 em,h2 em,h3 em{font-style:italic;color:var(--accent)}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,.ar-display{font-family:var(--font-arabic-display)}