/* ============================================================
   BitBootcamp — SHARED DESIGN SYSTEM (single source of truth)
   Change tokens/fonts HERE → the whole site updates.
   Loaded LAST on every page so these tokens win.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* DARK (Kohaku 琥珀 · amber on warm espresso) — default */
  --bg:#17130E; --bg2:#0F0C08; --panel:#211B13; --panel-2:#2B2318;
  --border:#3A3022; --border-2:#4C4030;
  --text:#F3ECDD; --muted:#D8CEBA; --faint:#AA9D83; --ink:#F3ECDD;
  --accent:#EE7800; --accent-2:#F8B500; --accent-dim:#EE780022;
  /* domain accents */
  --AIM:#EE7800; --CYBER:#e5555a; --DEVOPS:#5b9bd5; --START:#43c07a;
  --LEAD:#e0b64a; --GRC:#b98bff; --DATA:#4bc0c0;
  /* learning-path + collection accents (centralized — were per-page before) */
  --intro:#5fd08a; --core:#f0b23a; --advanced:#ff6f61;
  --drill:#f5972a; --primer:#3fd0bd; --pattern:#b98bff; --echo:#ff7ea8; --casestudy:#ff5f6d;
  /* status */
  --ok:#7bd88f; --bad:#ff6f61; --warn:#f0b23a; --err:#ff7a6b; --violet:#b98bff;
  /* misc surfaces */
  --line:var(--border); --chip:#241f18; --chip-b:#3b3327; --sec:#5fb0a8; --lock:#b3a68f; --accent2:var(--accent-2);
  /* code blocks (syntax highlight) */
  --cb-bg:#1d1a14; --cb-bar:#141109; --cb-border:#322c22; --cb-barbd:#2a251c; --cb-text:#ece5d6; --cb-lang:#c99b5d; --cb-copy:#b0a595; --cb-copybd:#3a3227; --cb-shadow:0 3px 16px rgba(0,0,0,.16); --cb-comment:#7c7361; --cb-kw:#e0985b; --cb-str:#9ec97f; --cb-num:#e6c07b; --cb-title:#6fb3d2; --cb-builtin:#e6a94a; --cb-attr:#d6b06a; --cb-meta:#9a8c76; --cb-del:#e5776b;
  /* aliases: card surface tracks --panel; code-block bg tracks --cb-bg (both theme-aware) */
  --card:var(--panel); --code:var(--cb-bg);
  /* type */
  --disp:'EB Garamond',Georgia,'Times New Roman',serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  /* legacy alias some pages use */
  --sans:var(--body);
  /* shape + layout */
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --shadow:0 12px 44px rgba(0,0,0,.38); --maxw:1200px; --pad:24px;
}
:root[data-theme="light"]{
  /* LIGHT (Shu 朱色 · vermilion on warm paper) */
  --bg:#FAF6EF; --bg2:#F1EADD; --panel:#FFFFFF; --panel-2:#F5EFE3;
  --border:#E8DFCC; --border-2:#D9CDB4;
  --text:#241D16; --muted:#6E6456; --faint:#9A8E7B; --ink:#241D16;
  --accent:#EB6101; --accent-2:#C24A00; --accent-dim:#EB610115;
  --AIM:#EB6101; --LEAD:#B07A12; --START:#2f9e63;
  --intro:#2e9e63; --core:#a9781a; --advanced:#cf4536;
  --drill:#bf6a12; --primer:#0f8a7a; --pattern:#6c46c4; --echo:#c94a80; --casestudy:#cf3f4d;
  --ok:#2e9e63; --bad:#cf4536; --warn:#a9781a; --err:#c9412f; --violet:#6c46c4;
  --line:var(--border); --chip:#f2ebdd; --chip-b:#e0d4bf; --sec:#3A8891; --lock:#6b6252; --accent2:var(--accent-2);
  --cb-bg:#FCFAF5; --cb-bar:#F0E8DA; --cb-border:#E7DECC; --cb-barbd:#E3D9C4; --cb-text:#35302A; --cb-lang:#B4601F; --cb-copy:#8A7C68; --cb-copybd:#D8CDB8; --cb-shadow:0 2px 10px rgba(120,90,40,.10); --cb-comment:#A99A82; --cb-kw:#B5561E; --cb-str:#4C7A3A; --cb-num:#9A6410; --cb-title:#2A6C93; --cb-builtin:#A15E17; --cb-attr:#7C5E22; --cb-meta:#9a8c76; --cb-del:#B5401E;
  --shadow:0 12px 40px rgba(90,60,20,.10);
}

/* type: EB Garamond headlines, Inter body — applied via vars so pages inherit centrally */
/* page canvas — themed background so EVERY page (esp. labs that set none) is truly dark/light.
   Set on html only: pages with their own body gradient (index/concepts) keep it; bare pages get --bg. */
html{background:var(--bg);min-height:100%}
body{font-family:var(--body);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:0}
h1{font-weight:600} h2,h3{font-weight:600}
a{color:var(--accent)}

/* ---- shared components (prefixed, collision-free) ---- */
.bbc-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 80px}
.bbc-kick{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2)}
.bbc-hero{padding:48px 0 18px}
.bbc-hero h1{font-size:52px;line-height:1.04;margin:0 0 12px}
.bbc-hero p{font-size:18px;color:var(--muted);max-width:720px;margin:0}
.bbc-domain{margin-top:34px}
.bbc-domain-head{display:flex;align-items:baseline;gap:12px;margin:0 0 8px}
.bbc-domain-title{font-family:var(--disp);font-weight:600;font-size:24px;display:flex;align-items:center;gap:10px}
.bbc-domain-title::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.bbc-domain-count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--faint)}
.bbc-list{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.bbc-row{display:flex;align-items:center;gap:14px;padding:15px 18px;border-top:1px solid var(--border);text-decoration:none;color:var(--text);transition:background .12s}
.bbc-row:first-child{border-top:0}
.bbc-row:hover{background:var(--panel-2)}
.bbc-row .r-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.bbc-row .r-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.bbc-row .r-title{font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.2}
.bbc-row .r-sub{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbc-row .r-meta{margin-left:auto;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11.5px;color:var(--faint);white-space:nowrap}
.bbc-row .r-arrow{color:var(--accent);font-weight:700}
.bbc-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;text-decoration:none;color:var(--text);transition:transform .12s,border-color .12s}
.bbc-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.bbc-chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;color:var(--faint);border:1px solid var(--border);border-radius:20px;padding:5px 11px}
.bbc-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:700;font-size:14px;color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:10px 18px;cursor:pointer}
.bbc-btn.ghost{background:transparent;color:var(--accent)}
.bbc-btn:hover{filter:brightness(1.05)}
@media(max-width:640px){.bbc-hero h1{font-size:36px}.bbc-row .r-sub{white-space:normal}}

/* --- mobile readability --- */
@media(max-width:640px){
  html{font-size:16.5px}
  body{line-height:1.6}
  .bbc-btn{padding:12px 18px;font-size:15px}
  a,button{-webkit-tap-highlight-color:transparent}
  .videowrap video,.lrow-video video{min-height:200px}
}

/* ── Card art: subtle zoom-on-hover, site-wide (matches Practice Hub banners) ─────
   Any fixed-ratio "cover" image inside a hoverable card gently scales up. The
   parent wrapper already clips with overflow:hidden, so the frame stays put. */
.chero,.course-hero,.smast,.cmast,.psmast,.pthumb,.thumb,.dc-banner,.cmast-media{overflow:hidden}
.chero img,.course-hero img,.smast>img,.cmast>img,.psmast>img,
.pthumb img,.pthumb2,.thumb img,.dc-banner img{
  transition:transform .55s cubic-bezier(.22,.61,.25,1);will-change:transform;backface-visibility:hidden}
.ccard:hover .chero img,
.ccard:hover .thumb img,
.card:hover .thumb img,
.course-hero:hover img,
.smast:hover>img,.cmast:hover>img,.psmast:hover>img,
.pcard:hover .pthumb img,.pcard:hover .pthumb2,
.dcard:hover .dc-banner img{transform:scale(1.055)}
@media(prefers-reduced-motion:reduce){
  .chero img,.course-hero img,.smast>img,.cmast>img,.psmast>img,
  .pthumb img,.pthumb2,.thumb img,.dc-banner img{transition:none}
  .ccard:hover .chero img,.ccard:hover .thumb img,.card:hover .thumb img,
  .course-hero:hover img,.smast:hover>img,.cmast:hover>img,.psmast:hover>img,
  .pcard:hover .pthumb img,.pcard:hover .pthumb2,.dcard:hover .dc-banner img{transform:none}
}