/* ================================================================
   Jackson Digital — Design Tokens & Base Styles (Nov 2026 preview)
   Light, bright, welcoming. Blues sampled from logo_stacked.png.
   ================================================================ */
/* Self-hosted variable fonts (SIL Open Font License 1.1, see assets/fonts/OFL-LICENSE.txt). url() is relative to this file. */
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('../assets/fonts/dm-sans-latin-opsz-normal.woff2') format('woff2-variations'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('../assets/fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations'); }

:root {
  /* Brand */
  --blue:        #3766AE;
  --blue-deep:   #2659A3;
  --blue-ink:    #1B3F78;
  --navy:        #14233B;
  --green:       #1C7C54;
  --green-soft:  #E3F4EA;
  --amber:       #8A5300;
  --amber-soft:  #FFF1D6;

  /* Accents and project colors (v2) */
  --ink-navy:    #0F1830;
  --signal:      #7CE38B;   /* bright green, used on dark stages */
  --signal-ink:  #136B3F;   /* same hue, readable on light */
  --gold:        #F2C230;   /* Deer Texas gold */
  --tps-pink:    #D81B72;   /* Teacher Pop Shop */
  --dt-flag:     #1E3FA6;   /* Deer Texas flag blue */

  /* Surfaces */
  --bg:          #FFFFFF;
  --bg-tint:     #F4F7FC;
  --bg-pale:     #E8EFFA;
  --line:        #D9E2EF;
  --line-strong: #B9C7DB;

  /* Text */
  --text:        #14233B;
  --text-2:      #44526A;
  --text-3:      #5C6980;

  /* Shadows (restrained) */
  --shadow-sm:   0 1px 2px rgba(20,35,59,.06);
  --shadow-md:   0 6px 24px rgba(27,63,120,.08), 0 1px 3px rgba(20,35,59,.05);
  --shadow-lg:   0 18px 48px rgba(27,63,120,.12), 0 2px 6px rgba(20,35,59,.05);

  /* Spacing */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 40px; --space-2xl: 64px; --space-3xl: 104px;

  /* Type */
  --font-display: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --max-width: 1160px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px;

  --ease-out: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy); line-height: 1.12; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 5.4vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--blue-deep); text-underline-offset: 3px; }
a:hover { color: var(--blue-ink); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 12px; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}