/* ==========================================================================
   The O'Brien Maths Academy — design tokens
   --------------------------------------------------------------------------
   This is the only file you need to touch to reskin the site.
   Colours were sampled directly from the logo and the hero photograph.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts --
   Self-hosted so the site loads fast, works offline and makes no
   third-party requests. Variable fonts: one file covers every weight.      */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------ colour --
     violet-600 is sampled from the logo, ink-800 from the hero photo.
     gold-400 is drawn from the warm rim-light in the hero's top right —
     it is the one non-purple colour, reserved for primary actions.       */

  --ink-900: #12103a; /* footer, deepest surface                */
  --ink-800: #1e1850; /* hero + dark bands   (from hero photo)  */
  --ink-700: #2a2266; /* raised surface on dark                 */
  --ink-600: #3b3184; /* borders on dark                        */

  --violet-600: #5e17eb; /* BRAND PRIMARY    (from logo)        */
  --violet-500: #7b3ff2; /* hover / active                      */
  --violet-200: #d7c8fc; /* borders on light                    */
  --violet-100: #ede6fe; /* tinted panels                       */
  --violet-50: #f6f3ff; /* page tint                            */

  --gold-500: #8f5b04; /* gold for text/icons on ANY light surface (>=4.5:1) */
  --gold-400: #f5b544; /* accent surface, icons, underlines     */
  --gold-200: #fde8c0; /* accent tint                           */

  --grey-700: #3f3d52; /* body text on white                    */
  --grey-600: #5a5870; /* secondary text                        */
  --grey-400: #9a98ac; /* muted / captions on dark              */
  --grey-300: #e4e2ee; /* hairlines                             */
  --grey-200: #d9d9d9; /* logo lettering grey                   */
  --grey-100: #f4f3f8; /* subtle fill                           */
  --white: #ffffff;

  /* semantic aliases — components reference these, never the raw ramp */
  --bg: var(--white);
  --bg-tint: var(--violet-50);
  --bg-dark: var(--ink-800);
  --text: var(--grey-700);
  --text-muted: var(--grey-600);
  --text-on-dark: #eeecf8;
  --text-on-dark-muted: #b9b5d6;
  --brand: var(--violet-600);
  --brand-hover: var(--violet-500);
  --accent: var(--gold-400);
  --rule: var(--grey-300);

  /* ------------------------------------------------------- typography -- */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  /* fluid scale — min at 360px viewport, max at 1200px */
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.33vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
  --step-3: clamp(1.625rem, 1.4rem + 1vw, 2.25rem);
  --step-4: clamp(1.875rem, 1.5rem + 1.7vw, 2.9375rem);
  --step-5: clamp(2.25rem, 1.6rem + 2.9vw, 3.75rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.65;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  --measure: 62ch; /* comfortable reading width */
  --measure-narrow: 46ch;

  /* ----------------------------------------------------------- space -- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* section rhythm — shrinks on small screens */
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --gutter: clamp(1.25rem, 0.75rem + 2.2vw, 2.5rem);
  --container: 1180px;
  --container-narrow: 760px;

  /* ------------------------------------ shape (echoes the logo shield) -- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* shadows are tinted with the brand purple rather than neutral grey */
  --shadow-sm: 0 1px 2px rgba(30, 24, 80, 0.06),
    0 2px 6px rgba(30, 24, 80, 0.05);
  --shadow-md: 0 2px 4px rgba(30, 24, 80, 0.06),
    0 8px 24px rgba(30, 24, 80, 0.08);
  --shadow-lg: 0 4px 8px rgba(30, 24, 80, 0.07),
    0 18px 48px rgba(30, 24, 80, 0.12);

  --ring: 0 0 0 3px var(--violet-200);

  /* ---------------------------------------------------------- motion -- */
  --ease: cubic-bezier(0.32, 0.72, 0.28, 1);
  --duration: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0.01ms;
  }
}