/**
 * IMT Premium Education System — Design Tokens
 * Source of truth for colors, type, space, radius, shadow, motion.
 * Do not put component layout rules here.
 */

:root {
  /* Brand colors */
  --imt-primary: #5786C7;
  --imt-primary-dark: #4569A8;
  --imt-primary-deep: #3D6AAB;
  --imt-primary-soft: #EEF4FC;
  --imt-primary-light: #DCE9FA;
  --imt-white: #FFFFFF;
  --imt-bg: #F8FAFD;
  --imt-text: #1F2937;
  --imt-muted: #64748B;
  --imt-border: rgba(87, 134, 199, 0.14);
  --imt-border-strong: rgba(87, 134, 199, 0.28);
  --imt-danger: #DC2626;
  --imt-success: #15803D;

  /* Legacy aliases used across premium CSS */
  --imt-cta-accent: var(--imt-primary);
  --imt-cta-accent-deep: var(--imt-primary-dark);
  --imt-glass: rgba(255, 255, 255, 0.86);
  --imt-glass-border: rgba(255, 255, 255, 0.55);
  --cream: var(--imt-bg);

  /* Typography */
  --imt-font-heading: "Cairo", "IBM Plex Sans Arabic", sans-serif;
  --imt-font-body: "IBM Plex Sans Arabic", "Cairo", sans-serif;
  --imt-text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --imt-text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
  --imt-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --imt-text-md: clamp(1.0625rem, 1rem + 0.35vw, 1.125rem);
  --imt-text-lg: clamp(1.125rem, 1.05rem + 0.45vw, 1.25rem);
  --imt-text-xl: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  --imt-text-2xl: clamp(1.65rem, 1.35rem + 1.2vw, 2.25rem);
  --imt-text-3xl: clamp(1.85rem, 1.5rem + 1.6vw, 2.75rem);
  --imt-leading-tight: 1.35;
  --imt-leading-snug: 1.5;
  --imt-leading-body: 1.75;
  --imt-leading-loose: 1.85;

  /* Spacing scale */
  --imt-space-1: 0.25rem;
  --imt-space-2: 0.5rem;
  --imt-space-3: 0.75rem;
  --imt-space-4: 1rem;
  --imt-space-5: 1.5rem;
  --imt-space-6: 2rem;
  --imt-space-7: 3rem;
  --imt-space-8: 4rem;
  --imt-section-y: clamp(2rem, 4vw, 3.5rem);
  --imt-container: min(1200px, calc(100% - 2rem));
  --imt-container-wide: min(1320px, calc(100% - 2rem));

  /* Radius */
  --imt-radius-sm: 8px;
  --imt-radius-md: 14px;
  --imt-radius-lg: 20px;
  --imt-radius-xl: 28px;
  --imt-radius-pill: 999px;

  /* Shadows */
  --imt-shadow-sm: 0 4px 16px rgba(31, 41, 55, 0.06);
  --imt-shadow-md: 0 12px 40px rgba(87, 134, 199, 0.12);
  --imt-shadow-lg: 0 20px 56px rgba(87, 134, 199, 0.16);
  --imt-sheet-shadow: 0 28px 80px rgba(15, 32, 68, 0.08);

  /* Focus & motion */
  --imt-focus-ring: 0 0 0 3px rgba(87, 134, 199, 0.35);
  --imt-motion-fast: 150ms;
  --imt-motion: 220ms;
  --imt-motion-slow: 320ms;
  --imt-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Touch */
  --imt-touch-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --imt-motion-fast: 0ms;
    --imt-motion: 0ms;
    --imt-motion-slow: 0ms;
  }
}

/* Global type baseline for premium site chrome */
body.is-home-page,
body.premium-inner-site {
  background-color: var(--imt-bg);
  color: var(--imt-text);
  font-family: var(--imt-font-body);
}

body.is-home-page h1,
body.is-home-page h2,
body.is-home-page h3,
body.is-home-page h4,
body.is-home-page h5,
body.is-home-page h6,
body.premium-inner-site h1,
body.premium-inner-site h2,
body.premium-inner-site h3,
body.premium-inner-site h4,
body.premium-inner-site h5,
body.premium-inner-site h6,
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6 {
  font-family: var(--imt-font-heading) !important;
}

:focus-visible {
  outline: none;
  box-shadow: var(--imt-focus-ring);
}

.imt-container {
  width: var(--imt-container);
  max-width: 100%;
  margin-inline: auto;
}