/* ============================================================
   AMAADOR ACADEMY — "ATELIER MONO" theme layer  (v2)
   Replaces the prior neon layer. An elegant editorial MONOCHROME
   system that is beautiful in BOTH modes:
     · LIGHT  = warm paper-white, near-black ink (default)
     · DARK   = near-black, soft off-white ink
   High-contrast type (Fraunces display + Inter body), hairline
   rules, generous whitespace, subtle film grain, refined motion.
   The existing #themeToggle switch flips data-theme — both modes
   are now distinct and intentional. Loaded AFTER academy.css.
   ============================================================ */

/* ---------- LIGHT (default) ---------- */
:root{
  --bg:#f7f6f3; --bg2:#efede8;
  --window:#ffffff; --surface:#faf9f6; --surface2:#f1efea;
  --ink:#111110; --ink2:#3b3a37; --txt:#3b3a37; --muted:#76746e; --mut:#76746e; --faint:#a3a09a;
  --line:#e7e4dd; --line2:#d8d4cb; --line3:#c4bfb4; --hair:rgba(17,17,16,.08);
  --navy:#111110; --navy2:#26251f; --on-navy:#ffffff;
  --acc:#111110; --acc2:#3b3a37; --acc-dim:rgba(17,17,16,.06); --acc-soft:rgba(17,17,16,.05);
  --good:#1f7a4d; --bad:#b23636;
  --r:10px; --r-md:13px; --r-lg:16px; --r-xl:22px; --pill:999px;
  --shadow-sm:0 1px 2px rgba(17,17,16,.05), 0 8px 24px -18px rgba(17,17,16,.3);
  --shadow:0 2px 6px rgba(17,17,16,.06), 0 24px 60px -30px rgba(17,17,16,.35);
  --shadow-lg:0 30px 80px -32px rgba(17,17,16,.4);
  --grain:.035;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-display:'Fraunces','Georgia',serif;
  --font-title:'Fraunces','Georgia',serif;
  --font-mono:'JetBrains Mono','Space Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
/* ---------- DARK ---------- */
html[data-theme="dark"]{
  --bg:#0c0c0d; --bg2:#121214;
  --window:#161618; --surface:#161618; --surface2:#1d1d20;
  --ink:#f4f2ec; --ink2:#c5c2ba; --txt:#c5c2ba; --muted:#8f8c84; --mut:#8f8c84; --faint:#62605a;
  --line:rgba(244,242,236,.10); --line2:rgba(244,242,236,.17); --line3:rgba(244,242,236,.26); --hair:rgba(244,242,236,.08);
  --navy:#f4f2ec; --navy2:#e6e3db; --on-navy:#0c0c0d;
  --acc:#f4f2ec; --acc2:#c5c2ba; --acc-dim:rgba(244,242,236,.08); --acc-soft:rgba(244,242,236,.06);
  --good:#43c489; --bad:#e87070;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -20px rgba(0,0,0,.8);
  --shadow:0 2px 8px rgba(0,0,0,.5), 0 28px 70px -34px rgba(0,0,0,.85);
  --shadow-lg:0 36px 90px -36px rgba(0,0,0,.9);
  --grain:.05;
}
html[lang="ar"], [dir="rtl"]{ --font:'Tajawal','Inter',system-ui,sans-serif; --font-display:'Tajawal','Georgia',serif; --font-title:'Tajawal','Georgia',serif; }

/* ===================== CANVAS ===================== */
body{
  color:var(--ink);
  background:var(--bg) !important; background-attachment:scroll !important;
  transition:background .5s ease, color .5s ease;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(255,255,255,.04) 0%, transparent 60%),
    var(--bg) !important;
}
/* the motion.js FX overlays — recolored to monochrome & calmed right down */
#neon-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:48px 48px,48px 48px;
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 85%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 85%);
  animation:none;
}
#neon-scan{ display:none !important; }
.neon-grain{ position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:var(--grain); mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
html[data-theme="dark"] .neon-grain{ mix-blend-mode:screen; }

/* ===================== TYPOGRAPHY ===================== */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:-.015em; color:var(--ink); }
.hero h1,.sec-t{ font-weight:600; letter-spacing:-.025em; }
.brand-main{ font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.brand-sub,.brand-cap{ color:var(--muted); font-family:var(--font-mono); letter-spacing:.16em; text-transform:uppercase; font-size:.62rem; }
.gx{ font-style:italic; color:var(--ink); -webkit-text-fill-color:currentColor; background:none; position:relative; }
.kicker{ color:var(--ink2); font-family:var(--font-mono); font-weight:500; letter-spacing:.28em; text-transform:uppercase; text-shadow:none; }
.kicker .dot{ background:var(--ink); box-shadow:none; }
.lead,.sub{ color:var(--muted); }
::selection{ background:var(--ink); color:var(--bg); }
code,.cert-seal-code,.cert-meta b,.tr-formula,.c-formula code{ font-family:var(--font-mono) !important; }

/* ===================== BUTTONS (high-contrast mono) ===================== */
.btn{
  font-family:var(--font); font-weight:600; letter-spacing:.01em; text-transform:none; font-size:.92rem;
  border:1px solid var(--ink); color:var(--on-navy); background:var(--ink);
  border-radius:var(--pill); box-shadow:none; clip-path:none; overflow:hidden; position:relative;
  transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .3s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%); transform:translateX(-120%); }
.btn:hover::after{ transform:translateX(120%); transition:transform .8s ease; }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line2); }
.btn.ghost:hover{ border-color:var(--ink); background:var(--acc-dim); box-shadow:none; transform:translateY(-2px); }
.btn.gold{ background:var(--ink); color:var(--on-navy); border-color:var(--ink); }

/* ===================== CARDS (clean editorial) ===================== */
.card,.disc-square,.path-card,.ha-card,.dash-card,.stat,.tr-callout,.tr-block,.exam-card,.soon-chip,.motto-band{
  background:var(--window) !important; border:1px solid var(--line) !important; border-radius:var(--r-lg);
  backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:var(--shadow-sm);
}
.card,.disc-square,.path-card{ position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .35s, border-color .3s; }
.card::before,.card::after,.disc-square::before,.disc-square::after{ content:none !important; }
.card.glow:hover,.disc-square:hover,.path-card:hover{
  transform:translateY(-6px); border-color:var(--line3) !important; box-shadow:var(--shadow); }
/* thin accent rule that draws on hover */
.disc-square::after,.card.glow::after{ content:"" !important; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.disc-square:hover::after,.card.glow:hover::after{ transform:scaleX(1); }
.card .ico,.disc-square .ds-ic,.cat-ic,.hub-domhead-ic{
  background:var(--acc-dim) !important; border:1px solid var(--line) !important; color:var(--ink) !important;
  box-shadow:none; border-radius:12px; }
.chip{ background:var(--surface) !important; color:var(--ink2); border:1px solid var(--line2) !important;
  font-family:var(--font-mono); letter-spacing:.02em; font-size:.74rem; backdrop-filter:none; }
.chip:hover{ color:var(--ink); border-color:var(--ink) !important; box-shadow:none; }

/* ===================== HEADER ===================== */
header,.site-header,.acad-header{
  background:color-mix(in srgb, var(--bg) 82%, transparent) !important;
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line) !important; box-shadow:none; }
.nav-links a,.nav-drop-btn{ color:var(--ink2); font-family:var(--font); font-size:.92rem; letter-spacing:0; position:relative; }
.nav-links a:hover,.nav-drop-btn:hover{ color:var(--ink); }
.nav-links a::after{ content:""; position:absolute; left:10px; right:10px; bottom:5px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); box-shadow:none; }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-drop-menu{ background:var(--window) !important; border:1px solid var(--line2) !important; backdrop-filter:none; box-shadow:var(--shadow); }
.nav-sep{ background:var(--line2) !important; }
.lang-btn{ color:var(--muted); font-family:var(--font-mono); font-size:.72rem; }
.lang-btn.active,.lang-btn:hover{ color:var(--ink); text-shadow:none; }

/* ---- the THEME SWITCH (refined pill) ---- */
.theme-toggle{ position:relative; width:58px; height:30px; border-radius:999px; border:1px solid var(--line2);
  background:var(--surface); cursor:pointer; padding:0; transition:background .35s, border-color .35s; display:inline-flex; align-items:center; }
.theme-toggle:hover{ border-color:var(--ink); }
.theme-toggle::after{ content:""; position:absolute; top:2px; left:2px; width:24px; height:24px; border-radius:50%;
  background:var(--ink); transition:transform .4s var(--ease), background .35s; }
html[data-theme="dark"] .theme-toggle::after{ transform:translateX(28px); }
.theme-toggle .th-ic{ position:absolute; top:50%; transform:translateY(-50%); font-size:.74rem; line-height:1; transition:opacity .3s; z-index:1; }
.theme-toggle .th-moon{ right:7px; opacity:.5; } .theme-toggle .th-sun{ left:7px; opacity:1; }
html[data-theme="dark"] .theme-toggle .th-sun{ opacity:.45; } html[data-theme="dark"] .theme-toggle .th-moon{ opacity:1; }

/* ===================== HERO ===================== */
.hero{ position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/neon-hero.svg") center bottom / cover no-repeat;
  opacity:.10; filter:grayscale(1) contrast(1.05);
  mask-image:linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%);
}
html[data-theme="dark"] .hero::before{ opacity:.16; mix-blend-mode:screen; }
.hero>*{ position:relative; z-index:1; }
.hero h1{ font-family:var(--font-title); text-shadow:none; }
.hero-badge{ background:var(--surface) !important; border:1px solid var(--line2); color:var(--ink2); font-family:var(--font-mono); letter-spacing:.02em; font-size:.74rem; backdrop-filter:none; }
.ha-card{ box-shadow:var(--shadow-sm); }
.ha-num,.stat b,.dash-stat b,.ha-cert-name{ font-family:var(--font-title) !important; color:var(--ink) !important; text-shadow:none; font-weight:600; }
.ha-bars i,.ha-chart i{ background:var(--ink) !important; box-shadow:none; border-radius:3px 3px 0 0; opacity:.85; }
.ha-up{ color:var(--good) !important; text-shadow:none; }
.ha-float{ background:var(--window) !important; border:1px solid var(--line2); color:var(--ink); }
.ha-dot,.fab-dot{ background:var(--good); box-shadow:none; }
.ha-qr{ filter:grayscale(1) contrast(1.1); }

/* ===================== REVEAL MOTION ===================== */
.reveal{ opacity:0; transform:translateY(22px); filter:none; transition:opacity .7s ease, transform .8s var(--ease); transition-delay:var(--d,0s); }
.reveal.in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-28px); } [data-reveal="right"]{ transform:translateX(28px); } [data-reveal="scale"]{ transform:scale(.94); }

/* ===================== TRAINING CONTENT ===================== */
.tr-callout{ border-left:2px solid var(--ink) !important; box-shadow:var(--shadow-sm) !important; background:var(--surface) !important; }
.tr-callout.c-warn{ border-left-color:var(--bad) !important; }
.tr-callout.c-best,.tr-callout.c-tip{ border-left-color:var(--good) !important; }
.tr-content table,.tr-block table{ border-color:var(--line2) !important; }
.tr-content th{ background:var(--acc-dim) !important; color:var(--ink) !important; font-family:var(--font-mono); letter-spacing:.02em; border-color:var(--line2) !important; }
.tr-content td{ border-color:var(--line) !important; }
.tr-content tr:hover td{ background:var(--acc-dim); }
.tr-bar .fill,.tr-bars .fill,.bar .fill,.tr-prog .fill,.prog-fill,.lesson-prog .fill{ background:var(--ink) !important; box-shadow:none; }
.tr-donut{ filter:none; }
.tr-step span,.tr-flow .n,.tr-sq b,.tr-subt{ color:var(--ink) !important; text-shadow:none; }
.tr-matrix .r-low{ background:rgba(31,122,77,.14) !important; } .tr-matrix .r-med{ background:rgba(140,120,40,.16) !important; }
.tr-matrix .r-high{ background:rgba(170,90,40,.18) !important; } .tr-matrix .r-ext{ background:rgba(178,54,54,.2) !important; }
.tr-embed{ border:1px solid var(--line2); border-radius:12px; box-shadow:var(--shadow-sm); overflow:hidden; }

/* ===================== CERTIFICATE ===================== */
.cert{ background:var(--window) !important; border:1px solid var(--ink) !important; box-shadow:var(--shadow) !important; position:relative; overflow:hidden; }
.cert::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 40%,var(--acc-dim) 50%,transparent 60%); animation:certSweep 7s linear infinite; pointer-events:none; }
@keyframes certSweep{ from{ transform:translateX(-60%) } to{ transform:translateX(60%) } }
.cert-kicker,.cert-name{ color:var(--ink) !important; font-family:var(--font-title) !important; text-shadow:none; }
.cert-course{ color:var(--ink2) !important; font-family:var(--font-title) !important; }
.cert-wm{ color:var(--ink) !important; opacity:.04 !important; }
.cert-meta span{ color:var(--muted) !important; } .cert-meta b{ color:var(--ink) !important; }

/* ===================== FABs ===================== */
.dfab{ background:var(--ink) !important; border:1px solid var(--ink) !important; color:var(--on-navy) !important; box-shadow:var(--shadow) !important; backdrop-filter:none; }
.dfab:hover{ transform:translateY(-2px) scale(1.04); box-shadow:var(--shadow-lg) !important; }
.dfab-donate{ background:var(--window) !important; color:var(--ink) !important; border-color:var(--ink) !important; }
.dfab-label{ background:var(--ink) !important; border:1px solid var(--ink); color:var(--on-navy) !important; font-family:var(--font-mono); letter-spacing:.02em; }
.fab-pop,.fab-feat,.dn-pop{ background:var(--window) !important; border:1px solid var(--line2) !important; backdrop-filter:none; box-shadow:var(--shadow) !important; }

/* ===================== MISC ===================== */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-thumb{ background:var(--line3); border-radius:9px; border:2px solid var(--bg); box-shadow:none; }
::-webkit-scrollbar-track{ background:transparent; }
html{ scrollbar-color:var(--line3) transparent; }
.motto-band h2{ background:none !important; -webkit-text-fill-color:currentColor; color:var(--ink) !important; filter:none; font-family:var(--font-title); font-style:italic; }
hr,.sep,.divider{ border-color:var(--line2) !important; }
a:focus-visible,button:focus-visible,.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ===================== CROSS-PAGE VIEW TRANSITIONS ===================== */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vtOut .38s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root){ animation:vtIn .46s var(--ease) both; }
@keyframes vtOut{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(8px); } }

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  #neon-grid,.cert::before,.btn::after{ animation:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  @view-transition{ navigation:none; }
  *{ scroll-behavior:auto !important; }
}