/* ==========================================================================
   Broadacres Academy — Colors & Type
   ========================================================================== */

/* Fonts ------------------------------------------------------------------- */
/* Libre Baskerville — self-hosted TTFs provided by the brand.
   Paths are relative to wherever colors_and_type.css is loaded from. */
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400;
  src: url('fonts/LibreBaskerville-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400;
  src: url('fonts/LibreBaskerville-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 500;
  src: url('fonts/LibreBaskerville-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 500;
  src: url('fonts/LibreBaskerville-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 600;
  src: url('fonts/LibreBaskerville-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 600;
  src: url('fonts/LibreBaskerville-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 700;
  src: url('fonts/LibreBaskerville-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 700;
  src: url('fonts/LibreBaskerville-BoldItalic.ttf') format('truetype'); font-display: swap; }

/* Roboto — still sourced from Google Fonts (no local TTFs were provided). */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root {
  /* ---------- BRAND COLORS ------------------------------------------------ */
  /* Primary dark blue — the anchor of the brand */
  --ba-navy:            #001D39;  /* Primary dark blue, headlines, backgrounds */
  --ba-navy-2:          #1C3B5A;  /* Secondary navy, for layered dark sections */

  /* Turquoise / Teal family — "generic" cross-phase color; also Prep school */
  --ba-teal:            #039CAC;  /* Deep turquoise */
  --ba-teal-dark:       #0B7F8B;  /* Darker turquoise, for text on light */
  --ba-mint:            #1CBC91;  /* Mint / light-green (Preschool phase) */
  --ba-mint-light:      #53F5C4;  /* Bright mint accent */

  /* Red family — High School phase */
  --ba-red:             #E20630;  /* Primary red */
  --ba-red-dark:        #AF0626;  /* Deep red for banners */

  /* Neutrals */
  --ba-grey:            #D3D5D6;  /* Light neutral grey */
  --ba-sky:             #A8BDD5;  /* Desaturated sky blue neutral */
  --ba-white:           #FFFFFF;
  --ba-off-white:       #F7F6F2;  /* Warm paper white for light mode */
  --ba-ink:             #0A1626;  /* Near-black for body text */

  /* ---------- PHASE-SPECIFIC ACCENTS (guideline) ------------------------- */
  --ba-phase-preschool: var(--ba-mint);
  --ba-phase-prep:      var(--ba-teal);
  --ba-phase-highschool:var(--ba-red);
  --ba-phase-generic:   var(--ba-teal);   /* default cross-school accent */

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND -------------------------- */
  --fg-1: var(--ba-navy);          /* Primary text on light */
  --fg-2: #33455C;                  /* Secondary text */
  --fg-3: #6A7688;                  /* Muted text */
  --fg-on-dark: var(--ba-white);
  --fg-on-dark-muted: #C9D3E0;

  --bg-1: var(--ba-white);
  --bg-2: var(--ba-off-white);
  --bg-3: var(--ba-grey);
  --bg-dark: var(--ba-navy);
  --bg-dark-2: var(--ba-navy-2);

  --accent:       var(--ba-teal);
  --accent-soft:  var(--ba-mint);

  /* Lines / dividers */
  --line-soft:   rgba(0, 29, 57, 0.12);
  --line-on-dark: rgba(255, 255, 255, 0.18);

  /* ---------- TYPEFACES ------------------------------------------------- */
  --font-serif:  'Libre Baskerville', 'Cormorant Garamond', Georgia, serif;   /* Primary — display + editorial */
  --font-sans:   'Roboto', 'Helvetica Neue', Arial, sans-serif;               /* Secondary — body + UI */

  /* ---------- TYPE SCALE ------------------------------------------------- */
  /* Display / editorial (serif) */
  --fs-display-xl: clamp(3.5rem, 6vw, 6rem);   /* hero "Learning, naturally" */
  --fs-display-l:  clamp(2.75rem, 4.5vw, 4.5rem);
  --fs-display-m:  2.5rem;
  --fs-display-s:  1.75rem;

  /* Body / UI (sans) */
  --fs-lead:  1.25rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.55;

  --tracking-eyebrow: 0.18em;  /* ALL-CAPS eyebrows (Roboto) */
  --tracking-button:  0.12em;
  --tracking-tight:   -0.01em;

  /* ---------- SPACING ---------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---------- RADII ------------------------------------------------------ */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 24px;
  --r-xl: 40px;       /* soft pill shape used in marketing cards */
  --r-pill: 999px;
  --r-shape: 42% 58% 38% 62% / 40% 35% 65% 60%; /* organic dandelion-like blob */

  /* ---------- SHADOWS ---------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(0, 29, 57, 0.06);
  --sh-2: 0 4px 14px rgba(0, 29, 57, 0.08);
  --sh-3: 0 18px 40px -12px rgba(0, 29, 57, 0.25);
  --sh-card: 0 10px 30px -10px rgba(0, 29, 57, 0.18);

  /* Motion */
  --ease-natural: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;
  --dur-slow: 520ms;
}

/* =========================================================================
   BASE STYLES
   ========================================================================= */
html { font-size: 16px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings use the SERIF (Libre Baskerville). The brand leans on italic serif
   for emotive words ("naturally", "beginning", "learning"). Pair a roman line
   with an italic line for the hero treatment. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  color: var(--fg-1);
  line-height: var(--lh-heading);
  font-weight: 400;   /* Libre Baskerville regular reads as "book" */
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
}

h1, .h1 { font-size: var(--fs-display-l); line-height: var(--lh-display); }
h2, .h2 { font-size: var(--fs-display-m); }
h3, .h3 { font-size: var(--fs-display-s); }
h4, .h4 { font-size: 1.25rem; }

.display-xl  { font-family: var(--font-serif); font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); }
.display-l   { font-family: var(--font-serif); font-size: var(--fs-display-l);  line-height: var(--lh-display); }
.italic      { font-style: italic; }

/* Eyebrow — all-caps Roboto, wide tracking. Used above big serif titles. */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* Body */
p  { margin: 0 0 1em; max-width: 62ch; }
.lead { font-size: var(--fs-lead); color: var(--fg-2); }
small, .small { font-size: var(--fs-small); color: var(--fg-3); }

/* Links */
a { color: var(--ba-teal-dark); text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity var(--dur-fast) var(--ease-natural); }
a:hover { opacity: 0.7; }

/* Utility */
.u-serif { font-family: var(--font-serif); }
.u-sans  { font-family: var(--font-sans); }
.u-italic { font-style: italic; }

.bg-navy  { background: var(--ba-navy);  color: var(--fg-on-dark); }
.bg-navy-2{ background: var(--ba-navy-2);color: var(--fg-on-dark); }
.bg-teal  { background: var(--ba-teal);  color: var(--fg-on-dark); }
.bg-mint  { background: var(--ba-mint);  color: var(--ba-navy); }
.bg-red   { background: var(--ba-red);   color: var(--fg-on-dark); }

/* Dark-section overrides */
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--fg-on-dark); }
.on-dark .eyebrow { color: var(--ba-mint); }
.on-dark p { color: var(--fg-on-dark-muted); }