/* ==========================================================================
   DESIGN TOKENS — Dr. Ayman Eltantawy site
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Colors and type scale migrated to the official UI Kit v1.0 (team-provided
   PowerPoint, see UI-KIT-EXTRACTED.md / UI-KIT-AUDIT.md). Kit-named
   variables below are the source of truth; --navy/--blue/--teal etc. are
   kept as the pre-existing names (already-matching hex, see comments) so
   the hundred+ existing var() call sites across site.css/pages CSS/blade
   don't need renaming — only the underlying values changed.
   ========================================================================== */
:root {
  /* Brand — official kit hexes. --navy/--blue/--teal already happened to
     equal these exact values before this migration, so only their *role*
     documentation changes here, not the hex itself. */
  --primary: #0451cb;   /* Kit Primary — buttons, links, active states, key CTAs */
  --secondary: #037dda; /* Kit Secondary — supporting actions, tags, highlights */
  --accent: #05c7d8;    /* Kit Accent — icon fills, small details, hover glow */

  --navy: var(--primary);
  --navy-dark: #033a8a; /* darker tint of Primary, for hover states (kit defines no hex for this) */
  --blue: var(--secondary);
  --teal: var(--accent);

  /* Tint/shade ramp — NOT part of the kit (kit defines only the 3 brand
     colors above with no ramp). Derived systematically from Primary/Accent
     rather than the old arbitrary DESIGN-SPEC.md ramp/coral hexes, so every
     value here traces back to an official kit color. Used for Event
     category accents, "save the date" badges, and the Media quote wall. */
  --blue-900: #031b42;   /* darken(primary) */
  --blue-800: #033a8a;   /* darken(primary), = --navy-dark */
  --blue-600: #0451cb;   /* = Primary */
  --blue-400: #037dda;   /* = Secondary */
  --blue-200: #9fc7ef;   /* lighten(primary) */
  --blue-100: #cfe3f8;   /* lighten(primary) */
  --blue-50: #edf4fc;    /* lighten(primary), near Background */
  --teal-800: #046b78;   /* darken(accent) */
  --teal-600: #05c7d8;   /* = Accent */

  /* Neutrals — official kit hexes */
  --ink: #0b1b2b;      /* Kit Ink */
  --muted: #51606f;    /* Kit Ink Soft */
  --line: #d7e1ec;     /* Kit Border */
  --surface: #ffffff;  /* Kit Surface — elevated components/cards */
  --bg: #f6f9fc;       /* Kit Background — page canvas */

  /* Semantic (success/warning/pending) — conventional status colors, not
     part of the brand identity. The kit defines no equivalents, so these
     are left as-is rather than force-fit onto Primary/Secondary/Accent. */
  --ok-bg: #e1f5ee;
  --ok-text: #085041;
  --warn-bg: #fcebeb;
  --warn-text: #a32d2d;
  --pending-bg: #fbf3e3;
  --pending-text: #a3812d;

  /* Type scale — official kit values. English only for now (Manrope);
     Cairo is loaded for Arabic content but no Arabic/RTL page content
     exists yet, so RTL layout support is intentionally out of scope here
     (see UI-KIT-AUDIT.md follow-up note). */
  --fs-display: 64px;
  --fs-h1: 48px;
  --fs-h2: 40px;
  --fs-h3: 32px;
  --fs-body: 16px;
  --fs-small: 14px;

  /* Legacy size aliases — every pre-existing var(--fs-*) call site across
     site.css/pages CSS resolves through here, so the kit scale applies
     everywhere without needing to touch each individual rule. Mapped by
     the role each size actually plays (e.g. --fs-2xl is used for every
     page's <h1>, so it maps to --fs-h1, not to its nearest raw pixel
     value). Sizes below the kit's smallest step (14px small badges/meta
     text) are intentionally left alone — the kit doesn't define a token
     that small. */
  --fs-xs: var(--fs-small);   /* was 11px */
  --fs-sm: var(--fs-small);   /* was 13px */
  --fs-base: var(--fs-body);  /* was 15px */
  --fs-md: var(--fs-body);    /* was 17px */
  --fs-lg: var(--fs-h3);      /* was 21px */
  --fs-xl: var(--fs-h3);      /* was 26px */
  --fs-2xl: var(--fs-h1);     /* was 32px — used for every page <h1> */
  --fs-3xl: var(--fs-h1);     /* was 42px, currently unused */
  --fs-4xl: var(--fs-display); /* was 54px, currently unused */

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(4, 81, 203, 0.07);
  --shadow-md: 0 10px 28px rgba(4, 81, 203, 0.12);
  --shadow-lg: 0 20px 48px rgba(4, 81, 203, 0.16);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-med: 280ms;
  --dur-slow: 450ms;

  /* Layout */
  --header-h: 72px;
  --content-w: 720px;
  --wide-w: 1160px;

  /* Brand gradient — reserved for ONE hero moment per page. Do not reuse
     on repeated small elements (avatars, thumbnails, quote walls, stat
     tiles); use a flat brand color there instead. */
  --gradient-brand: linear-gradient(135deg, var(--navy) 0%, var(--blue) 55%, var(--teal) 100%);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Smooth cross-page fade (native View Transitions API — Chrome/Edge;
   silently ignored elsewhere, so this is a pure progressive enhancement). */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}