/* ==========================================================================
   ISIB Design System v2 — Design Tokens
   Single source of truth. Change values here to re-theme the entire site.
   ========================================================================== */

:root {
  /* ---------- Brand (blue) ---------- */
  --c-brand-50:  #eaf2fe;
  --c-brand-100: #d3e3fc;
  --c-brand-200: #a7c8f9;
  --c-brand-300: #6fa4f2;
  --c-brand-400: #3d81e8;
  --c-brand-500: #1a66d6;   /* primary brand */
  --c-brand-600: #1452b2;
  --c-brand-700: #10408c;
  --c-brand-800: #0c2f68;
  --c-brand-900: #08214a;

  /* Deep navy — premium dark surfaces (hero, stats, footer) */
  --c-deep-800: #102947;
  --c-deep-900: #0a1d35;
  --c-deep-950: #061527;

  /* ---------- Accent (gold — conversion) ---------- */
  --c-accent-50:  #fff8e8;
  --c-accent-100: #ffedc2;
  --c-accent-300: #ffd166;
  --c-accent-400: #ffbe38;
  --c-accent-500: #f5a800;
  --c-accent-600: #d18f00;
  --c-accent-700: #a26e00;

  /* ---------- Feedback ---------- */
  --c-success: #15803d;
  --c-success-soft: #ecfdf3;
  --c-danger:  #dc2626;
  --c-danger-soft: #fef2f2;

  /* ---------- Neutrals (slate) ---------- */
  --c-white: #ffffff;
  --c-ink-50:  #f8fafc;
  --c-ink-100: #f1f5f9;
  --c-ink-200: #e2e8f0;
  --c-ink-300: #cbd5e1;
  --c-ink-400: #94a3b8;
  --c-ink-500: #64748b;
  --c-ink-600: #475569;
  --c-ink-700: #334155;
  --c-ink-800: #1e293b;
  --c-ink-900: #0f172a;

  /* ---------- Semantic roles ---------- */
  --bg-page:       #fbfcfd;
  --bg-surface:    var(--c-white);
  --bg-subtle:     var(--c-ink-50);
  --bg-brand-soft: var(--c-brand-50);
  --bg-dark:       var(--c-deep-950);

  --text-strong:   var(--c-ink-900);
  --text-default:  var(--c-ink-700);
  --text-muted:    var(--c-ink-600);   /* AA on light backgrounds */
  --text-on-dark:  rgba(255, 255, 255, 0.92);
  --text-on-dark-muted: rgba(255, 255, 255, 0.82);
  --text-on-accent: #2a1f00;

  --border-subtle:  var(--c-ink-200);
  --border-default: var(--c-ink-300);
  --border-brand:   var(--c-brand-200);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  /* ---------- Typography ---------- */
  /* IBM Plex Sans Arabic tops out at 700 — the scale never asks for more. */
  --font-sans: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", system-ui, sans-serif;

  --fs-xs:      0.8rem;
  --fs-sm:      0.9rem;
  --fs-base:    1rem;
  --fs-md:      1.125rem;
  --fs-lg:      clamp(1.2rem, 1rem + 0.7vw, 1.4rem);
  --fs-xl:      clamp(1.45rem, 1.15rem + 1.1vw, 1.8rem);
  --fs-2xl:     clamp(1.85rem, 1.35rem + 1.9vw, 2.5rem);
  --fs-display: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.7;

  /* ---------- Spacing (8pt) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;

  /* Generous vertical rhythm between sections */
  --section-y: clamp(3.5rem, 2.25rem + 6vw, 7rem);

  /* ---------- Layout ---------- */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 0.75rem + 2vw, 2rem);
  --header-h: 76px;
  --hero-viewport: calc(100svh - var(--header-h));

  /* ---------- Radius ---------- */
  --radius-sm:   10px;
  --radius-md:   14px;   /* buttons, inputs */
  --radius-lg:   20px;   /* cards */
  --radius-xl:   28px;   /* hero panels, banners */
  --radius-pill: 999px;  /* badges, chips, segmented */

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(6, 21, 39, 0.05);
  --shadow-sm: 0 2px 10px rgba(6, 21, 39, 0.06);
  --shadow-md: 0 10px 28px rgba(6, 21, 39, 0.09);
  --shadow-lg: 0 24px 60px rgba(6, 21, 39, 0.16);
  --shadow-accent: 0 10px 24px rgba(245, 168, 0, 0.30);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 450ms;

  /* ---------- Focus ring ---------- */
  --ring: 0 0 0 3px var(--c-brand-100), 0 0 0 5px var(--c-brand-400);

  /* ---------- Z-index ---------- */
  --z-header: 100;
  --z-overlay: 190;
  --z-drawer: 200;
  --z-toast: 300;
}