/*
  Design tokens — the ONLY place raw colour/size/shadow values may appear.
  base.css, components.css and sections.css must reference these custom
  properties exclusively. Breakpoints are documented here as a reference
  (custom properties can't be read inside @media conditions), but the same
  three numbers — 600 / 900 / 1200 — are used literally in every @media rule
  across the other stylesheets, so this file is still the single source of
  truth for what those numbers mean.
*/

:root {
  /* ---- Colour: accent (warm amber/orange — "ignite") ---- */
  --color-accent-100: #FFE8D6;
  --color-accent-300: #FFB37A;
  --color-accent-500: #FF7A1A;
  --color-accent-600: #F0630A;
  --color-accent-700: #C94F06;
  --color-accent-contrast: #1A0900; /* text on top of solid accent-500 */

  /* ---- Colour: navy (headings / body text) ---- */
  --color-navy-900: #0F1B2D;
  --color-navy-700: #33415C;
  --color-navy-500: #64748B;

  /* ---- Colour: neutrals & surfaces ---- */
  --color-bg: #FBFAF8;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4F1EC;
  --color-border: #E7E3DD;

  /* ---- Colour: feedback ---- */
  --color-success: #1F9D55;
  --color-success-bg: #E7F7ED;
  --color-danger: #DC2626;
  --color-danger-bg: #FDECEC;

  /* ---- Colour: brand red/maroon — sampled from assets/teachers/teachers-hero.jpg
     (avg of ~18.5k matching pixels: #970E0B). Secondary brand accent, used
     where explicitly requested (e.g. the facilities gallery) alongside the
     orange "flame" accent used everywhere else. ---- */
  --color-maroon-100: #F8E0DF;
  --color-maroon-500: #B3211D;
  --color-maroon-600: #970E0B;
  --color-maroon-700: #7A0B08;
  --color-maroon-contrast: #FFFFFF;

  /* ---- Colour: third-party brand (fixed by the brand, not our palette) ---- */
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1DA851;
  --color-messenger: #0084FF;
  --color-messenger-dark: #0066CC;

  /* ---- Colour: subject-card gradients (courses, no photography) ---- */
  --grad-blue-start: #2B6CB0;   --grad-blue-end: #1A365D;
  --grad-green-start: #2F855A;  --grad-green-end: #1C4532;
  --grad-purple-start: #6B46C1; --grad-purple-end: #322659;
  --grad-teal-start: #0F9B8E;   --grad-teal-end: #0B4F49;
  --grad-amber-start: #DD6B20;  --grad-amber-end: #7B341E;
  --grad-navy-start: #33415C;   --grad-navy-end: #0F1B2D;
  --grad-rose-start: #E11D48;   --grad-rose-end: #7F1D2E;
  --grad-slate-start: #475569;  --grad-slate-end: #1E293B;

  /* ---- Type ---- */
  --font-heading: 'Sora', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-xl:   clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --text-3xl:  clamp(2.25rem, 1.7rem + 2vw, 3.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  /* ---- Space (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;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Shadow (soft, layered) ---- */
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 27, 45, 0.08), 0 1px 3px rgba(15, 27, 45, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 27, 45, 0.10), 0 4px 10px rgba(15, 27, 45, 0.05);
  --shadow-focus: 0 0 0 3px var(--color-accent-300);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: var(--space-4);
  --ratio-hero-media: 4 / 5;
  /* Reference only — see note above:
     --bp-sm: 600px;  --bp-md: 900px;  --bp-lg: 1200px; */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* faculty filmstrip width transition */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot "pop" for the teachers hero showcase */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-filmstrip: 450ms;
  --dur-slide: 4000ms; /* hero / testimonial auto-rotate interval */

  /* ---- Component: teachers hero showcase ---- */
  --dur-showcase-in: 900ms;
  --dur-showcase-float: 4s;
  --dur-showcase-glow: 4.5s;
  --dur-showcase-shine: 3.2s;
  --delay-showcase-float: 900ms;
  --delay-showcase-glow: 700ms;
  --delay-showcase-shine: 1200ms;
  --showcase-shine: linear-gradient(75deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-progress: 101; /* blog post reading-progress bar — must paint above the sticky header */
  --z-drawer: 200;
  --z-notice: 90;
  --z-fab: 95;
  --z-modal: 210;

  /* ---- Component: facilities gallery (coverflow) ---- */
  --gallery-card-w: 220px;
  --gallery-card-w-tablet: 240px;
  --gallery-card-h: 320px;
  --gallery-card-h-tablet: 300px;
  --gallery-card-h-mobile: 420px;
  --dur-gallery: 500ms;
  --dur-gallery-filter: 300ms;

  /* ---- Component: faculty filmstrip ---- */
  --faculty-panel-w-inactive: 60px;
  --faculty-panel-w-hover: 80px;
  --faculty-panel-w-active: 260px;
  --faculty-panel-h: 420px;
  --faculty-panel-h-tablet: 320px;
  /* Brand-tinted (accent-100) scrim, not plain white — satisfies both the
     "gradient in the brand colour" background and legible-dark-text-on-photo
     requirements with one element. */
  --faculty-scrim: linear-gradient(180deg, rgba(255, 232, 214, 0.97) 0%, rgba(255, 232, 214, 0.78) 55%, rgba(255, 232, 214, 0) 100%);

  /* ---- Component: MathBridge ---- */
  --mb-video-card-w: 280px;
  --mb-resource-thumb-h: 170px;

  /* ---- Component: Blog ---- */
  --blog-featured-card-w: 340px;
  --blog-post-content-w: 720px;
}