/* ============================================================
   Cambridge Ark Coaching — Design tokens
   ------------------------------------------------------------
   Sourced from the brand mark in TAO YU.pdf:
     • boat   → deep navy (#003f65, rgb 0,63,101)
     • heart  → dusty coral (#eb9a85, rgb 235,154,133)
     • paper  → soft cream (#fdfaf3, rgb 253,250,243)
                  — lifted halfway toward white from the original
                    logo cream (#faf4e6) for a lighter page surface
   The whole palette extends those three; nothing else.
   ============================================================ */

/* ---------- 1. BASE COLOR TOKENS ---------------------------- */
:root {
  /* Brand triad */
  --ink:           #0b3550;     /* deepest — type, anchors */
  --ink-navy:      #003f65;     /* boat navy — primary brand */
  --ink-navy-2:    #1d567c;     /* lighter navy for hover/secondary */
  --ink-navy-soft: #6f8da6;     /* dusty navy for muted UI */

  --coral:         #eb9a85;     /* the heart — primary warm */
  --coral-deep:    #d97a63;     /* hover / pressed */
  --coral-soft:    #f6cabc;     /* tint, badges, surfaces */
  --coral-wash:    #fbe7df;     /* very soft tint for backgrounds */

  /* Paper & neutrals (all warm, all on the cream axis) */
  --paper:         #fdfaf3;     /* primary background — soft cream, halfway between logo cream (#faf4e6) and white */
  --paper-2:       #f4ecd9;     /* secondary cream — sections, cards on cream */
  --paper-3:       #ece2c8;     /* divider / dropped surface */
  --paper-shadow:  #d8cdb0;     /* warm shadow tone — never pure grey */
  --white:         #ffffff;     /* used SPARINGLY — only for elevated cards */

  /* Supporting tones (kept deliberately small) */
  --sage:          #7b9082;     /* calm green for "steady / grounded" accents */
  --sage-soft:     #d6e0d8;     /* sage tint */
  --gold:          #c79a4c;     /* warm gold — for accreditation highlights only */

  /* Functional (semantic) */
  --success:       #5a8268;
  --warn:          #c79a4c;
  --error:         #b8425e;     /* deep raspberry (also the agreed accent tweak) */

  /* Foreground roles — use these, not the raw colors, in components */
  --fg-1:          var(--ink);            /* primary text */
  --fg-2:          #3b556b;                /* secondary text */
  --fg-3:          #6f8da6;                /* muted / metadata */
  --fg-on-navy:    var(--paper);
  --fg-on-coral:   var(--ink);

  --bg-1:          var(--paper);
  --bg-2:          var(--paper-2);
  --bg-3:          var(--paper-3);
  --bg-elevated:   var(--white);

  --border-1:      #e3d7b8;       /* soft on cream */
  --border-2:      #c9b88c;       /* stronger divider */
  --border-ink:    var(--ink-navy);
}

/* ---------- 2. SPACING / RADIUS / SHADOW -------------------- */
:root {
  /* 8pt spacing scale */
  --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;

  /* Corner radii — soft but not childish */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 14px;     /* default for cards */
  --radius-4: 22px;     /* hero panels */
  --radius-pill: 999px;

  /* Shadows — warm, never neutral grey */
  --shadow-0: 0 1px 0 rgba(11,53,80, .04);
  --shadow-1: 0 2px 6px rgba(11,53,80, .06), 0 1px 2px rgba(11,53,80, .04);
  --shadow-2: 0 10px 24px rgba(11,53,80, .08), 0 2px 6px rgba(11,53,80, .04);
  --shadow-3: 0 24px 48px rgba(11,53,80, .12), 0 4px 12px rgba(11,53,80, .06);
  --shadow-coral: 0 8px 24px rgba(217,122,99, .22);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(0,63,101, .18);
}

/* ---------- 3. TYPOGRAPHY ----------------------------------- */
/* Imports live in each HTML file so they only load when used:
   Lora            — warm humanist serif, display + body of quotes
   Manrope         — modern humanist sans, all body / UI copy
   Caveat          — friendly handwriting, only for signatures / heart-side accents
   Substitution note: the source uses Canva-default sans (likely Lato/Open Sans)
   for body and a clean serif for the headline quote. Lora + Manrope keep the
   warmth-and-clarity reading. Caveat is an addition for the brand's
   "boat-with-a-heart" friendliness — flag to Tao if she'd prefer to drop it. */

:root {
  --font-display: "Lora", "Iowan Old Style", Georgia, serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-hand:    "Caveat", "Bradley Hand", cursive;

  /* Type scale — modular, gentle ratio (~1.2) */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-body: 17px;       /* slightly large for warmth */
  --t-lg:   19px;
  --t-xl:   22px;
  --t-2xl:  28px;
  --t-3xl:  36px;
  --t-4xl:  48px;
  --t-5xl:  64px;
  --t-6xl:  84px;

  --lh-tight:   1.12;
  --lh-snug:    1.28;
  --lh-body:    1.55;
  --lh-relaxed: 1.7;

  --tracking-wide:  0.14em;     /* used for the all-caps SECTION labels */
  --tracking-mid:   0.04em;
  --tracking-tight: -0.01em;
}

/* ---------- 4. SEMANTIC TYPE CLASSES ------------------------ */
/* Apply directly OR use as references when styling components. */

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, var(--t-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h1, h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-3xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h4, h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  letter-spacing: var(--tracking-mid);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-navy);
}

.lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-xl);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.small, small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--fg-3);
}
.meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-mid);
  color: var(--fg-3);
}

.quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--t-2xl);
  line-height: 1.4;
  color: var(--fg-1);
}
.attribution {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-sm);
  letter-spacing: var(--tracking-mid);
  color: var(--fg-3);
}

.signature {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: var(--t-3xl);
  color: var(--ink-navy);
  line-height: 1;
}

/* Nav / link */
.nav-link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* Code (rare in this brand, but defined for completeness) */
code, .code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--paper-2);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-1);
  color: var(--ink-navy);
}

/* ---------- 5. BASELINE RESET ------------------------------- */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  /* Global scale-down — renders the whole (px-based, inline-styled) UI at ~80%.
     zoom keeps position:fixed/sticky working (unlike transform:scale). */
  zoom: 0.8;
}
a { color: var(--ink-navy); text-decoration: none; }
a:hover { color: var(--coral-deep); }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }

/* ---------- 6. RESPONSIVE / MOBILE -------------------------- */
/* The page is built with inline-styled grids; these rules collapse the
   multi-column layouts to a single column on small screens. We exclude
   the 7-column calendars (repeat(7…)) and the auto-fitting time-button
   grids (auto-fill/auto-fit) so those keep their own responsive behaviour.
   Stylesheet !important overrides the (non-important) inline styles. */
@media (max-width: 768px) {
  /* clip (not hidden) — clips horizontal overflow WITHOUT breaking the
     sticky header (overflow:hidden would turn body into a scroll container) */
  html, body { overflow-x: clip; }

  /* Collapse content + footer grids to one column */
  :where(main, footer) [style*="grid-template-columns"]:not([style*="repeat(7"]):not([style*="auto-fill"]):not([style*="auto-fit"]) {
    grid-template-columns: 1fr !important;
  }

  /* Tame the large vertical section rhythm on phones */
  main > section { padding-top: 60px !important; padding-bottom: 60px !important; }

  /* Wide admin tables scroll instead of overflowing the page */
  main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  main > section { padding-top: 44px !important; padding-bottom: 44px !important; }
}