/* ============================================================================
   base.css — Kerwin Springer design tokens (Direction A · Refine Poppins)
   ----------------------------------------------------------------------------
   ADDITIVE & NON-BREAKING by design:
   - Only defines :root tokens + opt-in component classes + safe render hints.
   - Sets NO font-family / size / colour directly on existing element selectors,
     so any page's own inline <style> (which loads after this file) still wins.
   - Pages adopt the system by referencing var(--font-body) etc. — visually
     identical wherever Poppins is present, but now from one source of truth.

   Load order:  global-nav.css  ->  base.css  ->  page inline <style>
   ========================================================================== */

:root{
  /* ---- TYPE FAMILIES (the whole point — change a face in ONE place) ---- */
  --font-body:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,"Courier New",monospace;

  /* ---- TYPE SCALE (modular ~1.20; fluid where it matters) ---- */
  --text-xs:12px;
  --text-sm:13.5px;
  --text-base:16px;
  --text-md:17.5px;
  --text-lg:clamp(19px,2.2vw,21px);
  --text-xl:clamp(21px,2.6vw,24px);
  --text-h3:clamp(19px,2.4vw,22px);
  --text-h2:clamp(26px,4vw,40px);
  --text-hero:clamp(38px,7.4vw,82px);

  /* ---- WEIGHTS (canonical roles) ---- */
  --w-regular:400;
  --w-medium:500;
  --w-semibold:600;
  --w-bold:700;
  --w-heavy:800;
  --w-black:900;

  /* ---- TRACKING / LEADING (the "refined" tuning) ---- */
  --track-hero:-.03em;
  --track-tight:-.02em;
  --track-snug:-.01em;
  --track-label:.14em;     /* uppercase eyebrows / kickers */
  --lh-tight:1.02;
  --lh-snug:1.18;
  --lh-body:1.6;

  /* ---- BRAND COLOUR (canonical values, sampled from index.html) ----
     A page that re-defines any of these in its own :root still overrides
     this file, so adoption is safe and incremental. */
  --navy:#16294a;
  --navy2:#1F3A66;
  --navy3:#2B4C7E;
  --gold:#F5A623;
  --gold2:#ffcf5a;
  --ink:#0f1b2d;
  --paper:#eef2f8;
  --card:#ffffff;
  --line:#e3e9f3;
  --muted:#5b6b82;

  /* subject accents (from index.html) */
  --maths:#2563eb; --phys:#7c3aed; --chem:#0d9488;
  --pob:#dc2626; --bio:#15803d; --it:#ea580c;

  /* ---- SPACE / RADIUS / SHADOW ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --radius-sm:9px; --radius:13px; --radius-lg:18px; --radius-pill:999px;
  --shadow:0 12px 34px rgba(16,27,45,.14);
  --shadow-lg:0 30px 70px rgba(16,27,45,.22);
}

/* ----------------------------------------------------------------------------
   SAFE GLOBAL RENDER HINTS
   Refinement only — NO family/size/layout. Cannot shift any layout.
   -------------------------------------------------------------------------- */
html{ -webkit-text-size-adjust:100%; }
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}

/* ----------------------------------------------------------------------------
   SHARED TOOLTIP COMPONENT  ·  .ks-tooltip
   Accessible (focusable + role hookable), one consistent look site-wide.
   Usage:
     <span class="ks-tooltip" tabindex="0" role="button"
           aria-describedby="…" data-tip="Explanatory text">What is XP?</span>
   Optional position: add data-tip-pos="bottom" (defaults to top).
   -------------------------------------------------------------------------- */
.ks-tooltip{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  cursor:help; outline:none;
}
.ks-tooltip::after{
  content:attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 12px);
  transform:translate(-50%,6px);
  width:max-content; max-width:240px; white-space:normal;
  background:var(--ink); color:#fff;
  font-family:var(--font-body); font-weight:var(--w-medium);
  font-size:12.5px; line-height:1.45; text-align:left;
  padding:10px 12px; border-radius:10px; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  z-index:60;
}
.ks-tooltip::before{
  content:""; position:absolute; left:50%; bottom:calc(100% + 6px);
  transform:translateX(-50%) translateY(6px);
  border:6px solid transparent; border-top-color:var(--ink);
  opacity:0; transition:opacity .18s, transform .18s; z-index:60;
}
.ks-tooltip:hover::after,.ks-tooltip:focus-visible::after{ opacity:1; transform:translate(-50%,0); }
.ks-tooltip:hover::before,.ks-tooltip:focus-visible::before{ opacity:1; transform:translateX(-50%) translateY(0); }
.ks-tooltip[data-tip-pos="bottom"]::after{ bottom:auto; top:calc(100% + 12px); transform:translate(-50%,-6px); }
.ks-tooltip[data-tip-pos="bottom"]::before{ bottom:auto; top:calc(100% + 6px); border-top-color:transparent; border-bottom-color:var(--ink); transform:translateX(-50%) translateY(-6px); }
.ks-tooltip[data-tip-pos="bottom"]:hover::after,.ks-tooltip[data-tip-pos="bottom"]:focus-visible::after{ transform:translate(-50%,0); }
.ks-tooltip:focus-visible{ box-shadow:0 0 0 3px rgba(43,76,126,.35); border-radius:6px; }
@media (max-width:560px){ .ks-tooltip::after{ max-width:200px; } }

/* ----------------------------------------------------------------------------
   ICON CONVENTION  ·  .ks-icon
   One outline icon style site-wide: 24px grid, 1.9 stroke, round caps.
   Inline SVGs that opt in get consistent sizing + currentColor inheritance.
   Mark decorative icons aria-hidden; give meaningful ones role="img" + <title>.
   -------------------------------------------------------------------------- */
.ks-icon{
  width:24px; height:24px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.ks-icon-sm{ width:18px; height:18px; }
.ks-icon-lg{ width:32px; height:32px; }

/* ----------------------------------------------------------------------------
   OPT-IN TYPE HELPERS (for new/migrated markup only — never auto-applied)
   -------------------------------------------------------------------------- */
.ks-display{ font-family:var(--font-display); font-weight:var(--w-black); letter-spacing:var(--track-hero); line-height:var(--lh-tight); }
.ks-h2{ font-family:var(--font-display); font-weight:var(--w-heavy); letter-spacing:var(--track-tight); line-height:var(--lh-snug); }
.ks-h3{ font-family:var(--font-display); font-weight:var(--w-bold); letter-spacing:var(--track-snug); }
.ks-body{ font-family:var(--font-body); font-weight:var(--w-regular); line-height:var(--lh-body); }
.ks-kicker{ font-family:var(--font-body); font-weight:var(--w-heavy); letter-spacing:var(--track-label); text-transform:uppercase; font-size:var(--text-xs); }
.ks-mono{ font-family:var(--font-mono); }