/* ==========================================================================
   MASTERMIND ACADEMIC CENTRE — DESIGN TOKENS
   Single source of truth for color, type, spacing, motion, radius.
   Colors are sampled directly from the brand logo. Update brand colors
   here only — never hard-code hex values in page-level CSS.
   ========================================================================== */

:root {
  /* ---- Color: Brand ---- */
  --color-primary-dark: #134585;        /* wordmark blue — nav, headings, primary text on light */
  --color-primary-dark-hover: #0f3868;
  --color-primary-dark-tint: #e7edf5;   /* pale wash of primary, for subtle backgrounds/focus rings */

  --color-accent-orange: #ed7113;       /* logo star/orbit orange — primary CTA color */
  --color-accent-orange-hover: #d3630d;
  --color-accent-orange-tint: #fdf0e4;

  --color-blue-mid: #7bb0cf;            /* orbit ring mid-blue — secondary accents, icons, dividers */
  --color-blue-pale: #eaf4f8;           /* palest orbit blue — section backgrounds, pills */
  --color-blue-deep: #0a2c5c;           /* deeper than primary-dark — gradient depth, never flat fills */

  /* ---- Gradients (used deliberately: hero atmosphere, CTA depth, icon
     fills — not stamped on every surface) ---- */
  --gradient-hero-wash: radial-gradient(120% 100% at 85% 0%, #eef6fb 0%, var(--color-background) 55%);
  --gradient-navy: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-blue-deep) 100%);
  --gradient-orange: linear-gradient(135deg, #f3903f 0%, var(--color-accent-orange) 100%);
  --gradient-icon: linear-gradient(140deg, var(--color-primary-dark-tint) 0%, var(--color-blue-pale) 100%);
  /* Separate from --gradient-orange on purpose: this one is for TEXT
     (background-clip:text), so both stops must individually clear 3:1
     against a white page background at large/bold text size. The button
     gradient above is tuned for white text sitting on top of it instead,
     which is a much lower bar and doesn't transfer to this use. */
  --gradient-accent-text: linear-gradient(100deg, var(--color-accent-orange-hover) 0%, var(--color-primary-dark) 100%);

  /* ---- Color: Neutrals ---- */
  --color-white: #ffffff;
  --color-background: #fafbfc;
  --color-surface: #ffffff;
  --color-border: #e2e6ec;

  --color-text-dark: #1a1f2b;
  --color-text-body: #333b47;
  --color-text-muted: #5b6472;
  --color-text-on-dark: #f4f7fb;

  /* ---- Color: Feedback ---- */
  --color-success: #1f8a4c;
  --color-error: #c0392b;

  /* ---- Typography ----
     Display: Plus Jakarta Sans — geometric, confident, carries both the
       "premium academic" and "modern/youthful" read the brief asks for.
     Body: Inter — highly legible at small sizes, stays quiet under it. */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --fs-h1: clamp(2.25rem, 1.8rem + 2vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.6;

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

  /* ---- Spacing scale (per spec section 13) ---- */
  --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: 80px;
  --space-10: 96px;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-padding: clamp(20px, 5vw, 64px);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Shadow (tinted with brand blue, not flat black) ---- */
  --shadow-sm: 0 1px 2px rgba(19, 69, 133, 0.06), 0 1px 3px rgba(19, 69, 133, 0.08);
  --shadow-md: 0 4px 12px rgba(19, 69, 133, 0.08), 0 2px 4px rgba(19, 69, 133, 0.06);
  --shadow-lg: 0 12px 32px rgba(19, 69, 133, 0.12);
  --shadow-xl: 0 24px 60px -12px rgba(10, 44, 92, 0.28);
  --shadow-glow-orange: 0 8px 24px -6px rgba(237, 113, 19, 0.45);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --duration-ambient: 40s;
}

/* Respect reduced-motion system-wide by collapsing durations to ~0.
   --duration-ambient (slow decorative rotation) is excluded from the
   collapse and instead disabled entirely at the point of use, since a
   0ms infinite-looping animation would just spin/flicker rather than
   stop. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}