/* ===========================================================
   SAZEH PEYVAND — DARK THEME
   Activated by <html data-theme="dark">. Loaded LAST (after
   style.css, transition.css, media-slot.css, standards.css,
   cms.css, fa.css and the per-page sector.css / contact.css).
   Every colour rule is scoped under html[data-theme="dark"], so
   the light theme is untouched. Most of the page follows the
   token overrides below; the rest are surfaces that hard-code a
   light colour in the source files.
   =========================================================== */

/* ---- 1. tokens ---- */
html[data-theme="dark"]{
  /* page surfaces are a neutral dark grey, a step above the near-black
     footer (--deep) so the two read apart */
  --bg:#2c3036; --paper:#33383e; --ink:#eef0f3; --ink-soft:#b6bcc4;
  /* a touch lighter than #5f6b7c so the small mono labels (field
     labels, dates, numbers) that use it stay readable on --bg */
  --ink-faint:#8f969f;
  --line:rgba(214,226,244,.12); --accent:#3aa2e4; --warm:#ef6a4a;
  /* helpers */
  --line-strong:rgba(214,226,244,.22);
  --card:#393e45; --card-2:#40464d;
  --deep:#070a10;                       /* for already-dark bands, so they separate from --bg */
  --accent-fill:#2287c6;                /* filled accent surfaces carrying white text (AA-safe) */
  --grid-ink:rgba(214,226,244,.045);    /* faint drafting grid */
  --shadow-sm:0 1px 0 rgba(0,0,0,.35),0 2px 6px -2px rgba(0,0,0,.5);
  --shadow-lg:0 22px 44px -24px rgba(0,0,0,.85);
  color-scheme:dark;
  scrollbar-color:#4b5159 var(--bg);
}
html[data-theme="dark"],
html[data-theme="dark"] body{background:var(--bg);color:var(--ink);}
html[data-theme="dark"] ::selection{background:var(--accent-fill);color:#fff;}
/* focus rings: recolour only — :where() keeps specificity below the
   component rules that set their own outline colour (e.g. --cc) */
html[data-theme="dark"] :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline-color:var(--accent);}

/* ---- 2. smooth switch ----
   Only background-color / color / border-color, and never on elements
   whose own transform/opacity transitions would be overridden.
   NOTE: the toggle should set data-theme="light" (not remove the
   attribute) so switching back to light animates as well. */
html[data-theme] body,
html[data-theme] .content,
html[data-theme] .about,
html[data-theme] .about-stage,
html[data-theme] .gal-frame,
html[data-theme] .stds,
html[data-theme] .cs,
html[data-theme] .proc,
html[data-theme] .ct-body,
html[data-theme] .ct-map,
html[data-theme] .cta-band,
html[data-theme] .footer,
html[data-theme] .splash-bg{
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;}
/* .topbar / .rail already fade in on opacity — keep that transition */
html[data-theme] .topbar,
html[data-theme] .rail{
  transition:opacity 1s ease .2s,background-color .35s ease,color .35s ease,border-color .35s ease;}
@media(prefers-reduced-motion:reduce){
  html[data-theme] body,html[data-theme] .content,html[data-theme] .about,html[data-theme] .about-stage,
  html[data-theme] .gal-frame,html[data-theme] .stds,html[data-theme] .cs,html[data-theme] .proc,
  html[data-theme] .ct-body,html[data-theme] .ct-map,html[data-theme] .cta-band,html[data-theme] .footer,
  html[data-theme] .splash-bg{transition:none;}
  html[data-theme] .topbar,html[data-theme] .rail{transition:opacity 1s ease .2s;}
}

/* ===========================================================
   style.css — home
   =========================================================== */

/* ---- fixed 3D stage: night sky behind the transparent canvas ---- */
html[data-theme="dark"] .stage{background:linear-gradient(180deg,#070b12 0%,#0c1420 55%,#111c2c 100%);}

/* ---- top chrome ----
   .btn / .lang / .brand-text follow the tokens (light pill, dark text,
   accent on hover). Hover text stays dark: white on the lighter accent
   would fall below AA. */
html[data-theme="dark"] .btn:hover{color:var(--bg);}
html[data-theme="dark"] .topbar .meta{text-shadow:0 1px 10px rgba(4,8,14,.6);}

/* ---- content sheet lifting over the 3D stage ---- */
html[data-theme="dark"] .content{
  box-shadow:0 calc(-48px * var(--lift)) 90px rgba(0,0,0,calc(.6 * var(--lift)));}
html[data-theme="dark"] .content::before{
  background:linear-gradient(90deg,transparent 8%,rgba(58,162,228,.9) 50%,transparent 92%);
  box-shadow:0 0 18px rgba(58,162,228,calc(.5 * var(--lift)));}

/* ---- capabilities grid ---- */
html[data-theme="dark"] .fgrid .gl{background:rgba(214,226,244,.18);}

/* ---- activities ---- */
/* inactive categories are large display text; nudge them above 3:1 */
html[data-theme="dark"] .act-cat{color:#858d98;}
html[data-theme="dark"] .act.is-active .act-cat{color:var(--ink);}
html[data-theme="dark"] .gal-frame{background:var(--paper);border-color:var(--line);}
@media(max-width:900px){
  html[data-theme="dark"] .act-cat{color:var(--ink);}
}

/* ---- CTA band (already dark): sink it one shade and edge it ---- */
html[data-theme="dark"] .cta-band{background:var(--deep);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
html[data-theme="dark"] .cta-primary{background:var(--accent-fill);}
html[data-theme="dark"] .cta-primary:hover{background:#2f96d6;}

/* ---- news ---- */
html[data-theme="dark"] .nv-chip:hover{border-color:var(--line-strong);background:var(--card);}
/* the light theme inverts the active chip to ink; on dark that would be a
   bright slab with low-contrast accent text — use a raised card instead */
html[data-theme="dark"] .nv-chip.is-active{background:var(--card-2);border-color:var(--accent);}
html[data-theme="dark"] .nv-chip.is-active span{color:var(--ink);}
html[data-theme="dark"] .nv-chip.is-active b{color:var(--accent);}
html[data-theme="dark"] .n2-gal image-slot{background:var(--paper);border-color:var(--line);}

/* ---- footer (already dark): sink it and add a hairline ---- */
html[data-theme="dark"] .footer{background:var(--deep);border-top:1px solid var(--line);}
html[data-theme="dark"] .foot-h,
html[data-theme="dark"] .foot-bottom{color:#8693a6;}

/* ---- splash ----
   .splash-bg uses var(--bg); the logo ink (.bm-ink → currentColor of
   .brand-text → var(--ink)) is light, so splash.js samples light dots. */
html[data-theme="dark"] .splash-bg{background:var(--bg);}
html[data-theme="dark"] .brand-text{color:var(--ink);}

/* ---- about · opening view ---- */
html[data-theme="dark"] .about,
html[data-theme="dark"] .about-stage{background:var(--bg);}
html[data-theme="dark"] .ad-chapters{border-top-color:var(--line-strong);}
html[data-theme="dark"] .ad-chapter{color:var(--ink);border-bottom-color:var(--line);}
html[data-theme="dark"] .ad-cue-mouse{border-color:var(--ink-soft);}
/* resting-video HUD: the expand glyph was a white disc with ink (now light) icon */
html[data-theme="dark"] .af-expand{background:rgba(10,14,20,.72);color:#eef3f9;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);}
html[data-theme="dark"] .af-chip{border-color:rgba(255,255,255,.18);}
/* the over-video steps, gauge, timeline and certificate cards sit on the
   dark video scrim in both themes — intentionally unchanged */

/* ---- certificate lightbox: a little more backdrop over the dark page ---- */
html[data-theme="dark"] .cert-lb-backdrop{background:rgba(2,4,8,.8);}
html[data-theme="dark"] .cert-lb-fig img{box-shadow:0 0 0 1px rgba(214,226,244,.1),0 40px 120px rgba(0,0,0,.75);}

/* ===========================================================
   standards.css
   =========================================================== */
html[data-theme="dark"] .stds{--grid:var(--grid-ink);background-color:var(--paper);border-top-color:var(--line);}
html[data-theme="dark"] .stds-sub{border-bottom-color:var(--line-strong);}
/* certificate sheets stay white (they are documents); shadows tuned for dark */
html[data-theme="dark"] .stds-paper{
  box-shadow:0 0 0 1px rgba(214,226,244,.08),var(--shadow-sm),var(--shadow-lg);}
@media (hover:hover){
  html[data-theme="dark"] .stds-cert:not(:disabled):hover .stds-paper{
    box-shadow:0 0 0 1px rgba(214,226,244,.14),0 4px 10px -4px rgba(0,0,0,.6),0 34px 60px -26px rgba(0,0,0,.9);}
}
html[data-theme="dark"] .stds-paper-empty{color:#5d6878;}
html[data-theme="dark"] .stds-zoom{background:rgba(10,14,20,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}

/* ===========================================================
   media-slot.css — image placeholders
   =========================================================== */
html[data-theme="dark"] image-slot{background:rgba(214,226,244,.035);}
html[data-theme="dark"] image-slot[data-empty]::before{border-color:rgba(214,226,244,.16);}
html[data-theme="dark"] image-slot[data-empty] .ms-ph{color:var(--ink-faint);}

/* transition.css — the page-turn sheet is already dark: no change */

/* ===========================================================
   cms.css — admin custom sections
   light / paper variants follow the tokens; cards get a dark fill
   =========================================================== */
html[data-theme="dark"] .cs{--cs-card:var(--card);}
html[data-theme="dark"] .cs--paper{background:var(--paper);}
html[data-theme="dark"] .cs-btn:hover{background:var(--accent-fill);color:#fff;}
/* dark variant: sink one shade below the page and add a hairline */
html[data-theme="dark"] .cs--dark{background:var(--deep);border-top:1px solid var(--line);
  --cs-card:rgba(255,255,255,.035);}
html[data-theme="dark"] .cs--dark .cs-btn{background:#eef1f5;color:#0a0e14;}
html[data-theme="dark"] .cs--dark .cs-btn:hover{background:var(--accent-fill);color:#fff;}

/* fa.css — RTL geometry/typography only; its colours use tokens or sit
   over the dark video scrim: no change */

/* ===========================================================
   sector.css — sector detail pages
   blueprint hero + .topbar.dark are already dark: kept as is
   =========================================================== */
html[data-theme="dark"] body:has(.bp-hero){background:#070b12;}
html[data-theme="dark"] .bp-hero{box-shadow:inset 0 -1px 0 var(--line);}
/* content sections (.r-intro, .caps, .works, .band) follow the tokens */
html[data-theme="dark"] .proc{background:var(--paper);}
html[data-theme="dark"] .step .dot{background:var(--paper);border-color:var(--ink-soft);color:var(--ink);}
html[data-theme="dark"] .step:nth-child(1) .dot{background:var(--accent-fill);border-color:var(--accent-fill);color:#fff;}
html[data-theme="dark"] .work .frame,
html[data-theme="dark"] .proj-hero{background:var(--paper);border-color:var(--line);}
html[data-theme="dark"] .work .frame .badge,
html[data-theme="dark"] .proj-id .badge{background:rgba(4,7,12,.82);box-shadow:inset 0 0 0 1px rgba(118,211,255,.18);}
html[data-theme="dark"] .sites li{background:var(--card);border-color:var(--line);}
/* sector CTA (already dark): edge it off the dark content */
html[data-theme="dark"] .cta{border-top:1px solid var(--line);}

/* ===========================================================
   contact.css — form body + locations (hero already dark)
   =========================================================== */
html[data-theme="dark"] .ct-body,
html[data-theme="dark"] .ct-map{background:var(--bg);}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea{border-bottom-color:var(--line-strong);color:var(--ink);caret-color:var(--accent);}
html[data-theme="dark"] .field input:hover,
html[data-theme="dark"] .field select:hover,
html[data-theme="dark"] .field textarea:hover{border-bottom-color:rgba(214,226,244,.34);}
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .field textarea:focus{border-bottom-color:var(--accent);}
html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder{color:var(--ink-faint);opacity:.9;}
/* the source pins option text to #10141a — unreadable on a dark dropdown */
html[data-theme="dark"] .field select option{color:var(--ink);background:var(--paper);}
/* browser autofill paints a light-yellow box; keep it on the page colour */
html[data-theme="dark"] .field input:-webkit-autofill,
html[data-theme="dark"] .field textarea:-webkit-autofill,
html[data-theme="dark"] .field select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset;-webkit-text-fill-color:var(--ink);caret-color:var(--accent);}
html[data-theme="dark"] .ct-ok-card{box-shadow:0 30px 70px -40px rgba(0,0,0,.8);}
html[data-theme="dark"] .ct-error{color:#ff8a80;background:rgba(255,99,90,.1);}
html[data-theme="dark"] .ct-submit{box-shadow:0 16px 40px -16px rgba(0,0,0,.7);}
html[data-theme="dark"] .ct-submit:hover{color:var(--bg);box-shadow:0 22px 50px -18px rgba(58,162,228,.55);}
html[data-theme="dark"] .ct-map-frame{border-color:var(--line);}