/* FNOTrader School — design "B · Chart-paper Notebook" (chosen 2026-11-06).
   One skin for EVERY School page (home, 76 strategy pages, scanner, course catalogue, buy page, every lesson).
   It re-points the tokens all School pages already share, so page content and layout stay untouched.
   Loaded last in <head> by school_nav.py (static pages) and course_build.py (course pages).
   The html:root prefix out-ranks each page's own :root / [data-theme] / prefers-color-scheme blocks.
   School pages always carry data-theme (school_nav's head script), so light = [data-theme], dark = [data-theme="dark"]. */

html:root,html:root[data-theme]{
  --pagebg:#F7FAFD; --sheet:#FFFFFF; --card:#FFFFFF; --sunk:#F1F5F9; --panel-2:#F1F5F9;
  --ink:#12202E; --ink-2:#3D4E60; --ink-3:#5A6B7E; --rule:#C9D6E3; --grid:#E4ECF5;
  --accent:#0B6E5E; --accent-soft:#E2F1EC; --hl:#E2F1EC;
  --gain:#0F7F5C; --loss:#C2412D; --warn:#A16207; --warn-soft:#FBF3E2;
  --side-bg:#FFFFFF; --side-bg2:#FFFFFF; --side-ink:#12202E; --side-ink2:#3D4E60; --side-rule:#C9D6E3;
  --side-hi:#0B6E5E; --side-hi-soft:#E2F1EC; --side-hover:#F1F5F9;
  --shadow:0 1px 2px rgba(18,32,46,.05),0 10px 26px -16px rgba(18,32,46,.22);
  --b-line:#12202E; --b-second:#C2410C;
  --serif:Newsreader,Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --sans:"Schibsted Grotesk",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  color-scheme:light;
}
html:root[data-theme="dark"]{
  --pagebg:#0C141D; --sheet:#111D2A; --card:#132130; --sunk:#0F1925; --panel-2:#172636;
  --ink:#E6EDF4; --ink-2:#B3C2D1; --ink-3:#8FA2B6; --rule:#2A3D51; --grid:#152230;
  --accent:#5FD3BC; --accent-soft:#12342E; --hl:#12342E;
  --gain:#3CC79A; --loss:#F07B66; --warn:#E3B04B; --warn-soft:#2A2312;
  --side-bg:#0C141D; --side-bg2:#111D2A; --side-ink:#E6EDF4; --side-ink2:#9DB0C3; --side-rule:#22344A;
  --side-hi:#5FD3BC; --side-hi-soft:rgba(95,211,188,.12); --side-hover:rgba(255,255,255,.05);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.75);
  --b-line:#C9D6E3; --b-second:#FB923C;
  color-scheme:dark;
}

/* graph paper: the School's signature ground */
html:root body{background-color:var(--pagebg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;background-position:-1px -1px;font-family:var(--sans)}
/* the course catalogue sets body{background:…} inline at (0,2,2); keep the grid there too */
html:root[data-theme][data-theme] body{
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;background-position:-1px -1px}
html:root h1,html:root h2{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;text-wrap:balance}
html:root h1 em,html:root h2 em{color:var(--accent)}
html:root ::selection{background:var(--accent-soft)}
html:root :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the top bar, notebook style (wordmark per the FNOTrader logo standard) */
html:root .fnav{--fn-bg:var(--pagebg);--fn-ink:var(--ink);--fn-ink2:var(--ink-2);--fn-rule:var(--b-line);--fn-acc:var(--accent);--fn-soft:var(--accent-soft);
  border-bottom:1.5px solid var(--b-line);font-family:var(--sans);backdrop-filter:none;-webkit-backdrop-filter:none}
html:root .fnav .fn-in{max-width:1560px;margin:0 auto}
html:root .fnav .fn-brand{font:inherit;gap:0}
html:root .fnav .fn-brand img{width:28px;height:28px;background:#fff;padding:3px;border-radius:7px;box-shadow:0 1px 6px rgba(0,0,0,.25);margin-right:10px;box-sizing:border-box}
html:root .fnav .fn-txt{font:800 17px/1 Inter,var(--sans);letter-spacing:-.02em;color:var(--ink)}
html:root .fnav .fn-txt .fn-fno{color:var(--ink)}
html:root .fnav .fn-txt .fn-tr{color:var(--accent)}
html:root .fnav .fn-brand sup{font-size:8px;opacity:.5;color:inherit}
html:root .fnav .fn-sep{display:none}
html:root .fnav .fn-page{font:italic 500 19px/1 var(--serif);color:var(--ink-2);margin-left:10px}
html:root .fnav .fn-l{border:0;border-radius:0;background:none;padding:8px 10px;font-size:14px;font-weight:500;color:var(--ink-2)}
html:root .fnav .fn-l:hover{color:var(--ink);background:none}
html:root .fnav .fn-l[aria-current="page"]{color:var(--ink);background:none;box-shadow:inset 0 -2px 0 var(--accent)}
html:root .fnav .fn-b{border:1.5px solid var(--b-line);border-radius:0;color:var(--ink);font-size:13px;font-weight:600;padding:6px 12px;min-height:36px}
html:root .fnav .fn-b:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:640px){
  html:root .fnav .fn-in{padding:0 10px;gap:2px}
  html:root .fnav .fn-brand img{margin-right:6px}
  html:root .fnav .fn-txt{font-size:15px}
  html:root .fnav .fn-l{padding:8px 6px;font-size:13px}
  html:root .fnav .fn-b{padding:4px 8px;font-size:12px;min-height:32px}
}
@media (max-width:420px){
  html:root .fnav .fn-txt{display:none}
  html:root .fnav .fn-l{padding:8px 5px;font-size:12.5px}
}
@media (max-width:360px){
  html:root .fnav .fn-in{padding:0 8px;gap:0}
  html:root .fnav .fn-brand img{width:24px;height:24px;margin-right:4px}
  html:root .fnav .fn-l{padding:8px 3px;font-size:12px}
  html:root .fnav .fn-b{padding:4px 6px}
}