/* Dr. Wagner Okai · light/dark theme (2026-10-08)
   Loaded LAST on every page. The toggle styles below apply in both themes; everything else is scoped to
   html[data-theme="dark"], so the light site renders exactly as before.
   Night palette = the same notebook after hours: deep navy ink paper (never black), warm ivory text,
   the vermilion of his Shorts lifted for contrast, paper lines and tape kept but dimmed.
   Engravings printed on ivory are never left as bright boxes: framed ones become dimmed paper plates
   inside their dark mounts; loose ones become white-ink engravings on the night paper. */

/* ---------- theme toggle (both themes) ---------- */
.head-in .nav{margin-left:auto}
.theme-btn{order:3;flex:none;width:44px;height:44px;margin-left:-8px;border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;padding:0;transition:color .3s,border-color .3s,background .3s,transform .5s cubic-bezier(.2,.7,.2,1)}
.theme-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.theme-btn:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}
.theme-btn svg{grid-area:1/1;width:19px;height:19px;transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.theme-btn .ti-sun{opacity:0;transform:rotate(-70deg) scale(.6)}
html[data-theme="dark"] .theme-btn .ti-moon{opacity:0;transform:rotate(70deg) scale(.6)}
html[data-theme="dark"] .theme-btn .ti-sun{opacity:1;transform:none}
@media (max-width:1000px){.theme-btn{order:1;margin-left:auto;margin-right:-10px;width:46px;height:46px}.head-in .menu-btn{order:2}}
@media (prefers-reduced-motion:reduce){.theme-btn,.theme-btn svg{transition:none}}

/* ---------- dark: tokens ---------- */
html[data-theme="dark"]{color-scheme:dark;
  --paper:#101A2B; --paper-2:#15213A; --card:#1B2840; --rule:#33415C;
  --ink:#F2EBDD; --ink-2:#D6CFC1; --ink-3:#ADA798;
  --blue:#A9BCF2; --blue-deep:#CBD6F8; --blue-soft:#22305A;
  --red:#EF8068; --red-soft:#3C242A;
  --on-ink:#101A2B;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.34);
  --tape:rgba(205,186,148,.34);--tape-blue:rgba(169,188,242,.22);--tape-red:rgba(239,128,104,.24);
  --shadow-paper:0 1px 1px rgba(0,0,0,.35),0 8px 18px -6px rgba(0,0,0,.5),0 22px 40px -22px rgba(0,0,0,.7);
  --plate-dim:brightness(.8) sepia(.14) contrast(1.04);
}
html[data-theme="dark"] body{background-color:var(--paper)}

/* surfaces that were ink become ivory pills with navy type */
html[data-theme="dark"] .skip,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .nav .btn,
html[data-theme="dark"] .chip[aria-pressed=true],
html[data-theme="dark"] .vtabs.idx .chip[aria-pressed=true],
html[data-theme="dark"] .wo-msg.me,
html[data-theme="dark"] .wo-consent button,
html[data-theme="dark"] .wo-form button,
html[data-theme="dark"] .wo-pill{background:var(--ink);color:var(--on-ink)}
html[data-theme="dark"] .btn-primary:hover,html[data-theme="dark"] .nav .btn:hover{background:var(--ink);color:var(--on-ink)}
html[data-theme="dark"] .btn-primary{box-shadow:0 6px 20px rgba(0,0,0,.35)}
html[data-theme="dark"] .btn-ghost:hover{color:var(--on-ink)}
html[data-theme="dark"] .film-ctrl button:hover,html[data-theme="dark"] .film-arrow:hover{background:var(--ink);color:var(--on-ink)}
html[data-theme="dark"] .opt .box svg{color:var(--on-ink)}
html[data-theme="dark"] .lens-btn[aria-pressed=true]{background:var(--red);color:var(--on-ink)}
html[data-theme="dark"] .wo-pill{box-shadow:0 12px 28px rgba(0,0,0,.45)}
html[data-theme="dark"] .wo-pill::before{background:#C2452F;box-shadow:0 0 0 3px rgba(194,69,47,.2)}
html[data-theme="dark"] .wo-mascot-btn:hover .wo-pill{box-shadow:0 16px 32px rgba(0,0,0,.5)}
html[data-theme="dark"] .wo-fig::after{background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0))}
html[data-theme="dark"] .wo-fig img{filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
html[data-theme="dark"] .wo-greet{box-shadow:0 14px 34px rgba(0,0,0,.45)}

/* header + nav */
html[data-theme="dark"] .site-head,
html[data-theme="dark"]:has(.hc-hero) .site-head{background:rgba(16,26,43,.86)}
html[data-theme="dark"]:has(.hc-hero) .site-head{background:rgba(16,26,43,.97)}
html[data-theme="dark"] .nav a:hover,html[data-theme="dark"] .nav a[aria-current=page]{background:rgba(242,235,221,.07)}
html[data-theme="dark"] .nav a:not(.btn):hover,html[data-theme="dark"] .nav a[aria-current=page]:not(.btn){background:transparent}
html[data-theme="dark"] .nav a.btn[aria-current=page]{background:rgba(242,235,221,.08);color:var(--ink);box-shadow:none}
@media (max-width:1000px){html[data-theme="dark"] .nav{box-shadow:0 20px 40px rgba(0,0,0,.4)}}

/* the light logo wherever the dark ink would vanish (CSS swap = no flash; theme.js swaps src as a fallback) */
html[data-theme="dark"] img[src$="logo-okai.png"]{content:url("logo-okai-claro.png")}

/* footer: a deeper night than the page */
html[data-theme="dark"] .site-foot{background:#0A1220;border-top:1px solid #22304A}

/* ribbon, filmstrip */
html[data-theme="dark"] .marquee.ribbon{background:#0A1220;box-shadow:0 0 0 1px #2A3854,0 10px 26px -14px rgba(0,0,0,.8)}
html[data-theme="dark"] .marquee.ribbon span{color:var(--ink)}
html[data-theme="dark"] .filmstrip-wrap{background:#0A0F18}

/* paper objects: cards, sheets, polaroids, notes */
html[data-theme="dark"] .polaroid,
html[data-theme="dark"] .notebook-sheet,
html[data-theme="dark"] .appt,
html[data-theme="dark"] .notes4 li,
html[data-theme="dark"] .index-card,
html[data-theme="dark"] .letter,
html[data-theme="dark"] .vgrid.pinned .vcard,
html[data-theme="dark"] .kid-ph,
html[data-theme="dark"] .sb-visit-ph,
html[data-theme="dark"] .sb-prep,
html[data-theme="dark"] .sb-teach{background-color:var(--card)}
html[data-theme="dark"] .ps,html[data-theme="dark"] .result.note-card{background:#2E2A25}
html[data-theme="dark"] .notebook-sheet{background-image:linear-gradient(90deg,transparent 42px,rgba(239,128,104,.38) 42px 43.5px,transparent 43.5px),repeating-linear-gradient(180deg,transparent 0 35px,rgba(169,188,242,.09) 35px 36px)}
@media (max-width:560px){html[data-theme="dark"] .notebook-sheet{background-image:linear-gradient(90deg,transparent 22px,rgba(239,128,104,.38) 22px 23.5px,transparent 23.5px),repeating-linear-gradient(180deg,transparent 0 35px,rgba(169,188,242,.09) 35px 36px)}}
html[data-theme="dark"] .notebook-sheet .opt:hover{background:rgba(169,188,242,.06)}
html[data-theme="dark"] .notebook-sheet .opt[aria-pressed=true] > span:last-child{text-decoration-color:rgba(239,128,104,.6)}
html[data-theme="dark"] .index-card{background-image:linear-gradient(180deg,transparent 64px,rgba(239,128,104,.36) 64px 65.5px,transparent 0),repeating-linear-gradient(180deg,transparent 0 33px,rgba(169,188,242,.08) 33px 34px)}
html[data-theme="dark"] .nb{background-image:linear-gradient(90deg,transparent calc(max(20px,(100vw - var(--wrap))/2) - 18px),rgba(239,128,104,.3) calc(max(20px,(100vw - var(--wrap))/2) - 18px) calc(max(20px,(100vw - var(--wrap))/2) - 16.5px),transparent 0),repeating-linear-gradient(180deg,transparent 0 37px,rgba(169,188,242,.06) 37px 38px)}
@media (max-width:860px){html[data-theme="dark"] .nb{background-image:linear-gradient(90deg,transparent 8px,rgba(239,128,104,.3) 8px 9.5px,transparent 0),repeating-linear-gradient(180deg,transparent 0 37px,rgba(169,188,242,.06) 37px 38px)}}
html[data-theme="dark"] .sb{background-image:repeating-linear-gradient(180deg,transparent 0 37px,rgba(169,188,242,.06) 37px 38px)}
html[data-theme="dark"] .tape{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 6px,transparent 6px 13px);box-shadow:0 1px 2px rgba(0,0,0,.25)}
html[data-theme="dark"] .door-print .num{text-shadow:none}
html[data-theme="dark"] button.polaroid:hover,html[data-theme="dark"] a.polaroid:hover,
html[data-theme="dark"] .door-print:hover,html[data-theme="dark"] .d3:hover{box-shadow:0 2px 2px rgba(0,0,0,.3),0 28px 48px -20px rgba(0,0,0,.75)}
html[data-theme="dark"] .stamp,html[data-theme="dark"] .sb-seal,html[data-theme="dark"] .hxc-seal{filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
html[data-theme="dark"] .wo-msg.note{border-color:#5A3A3A}

/* translucent ivory pills / scrims → night paper */
html[data-theme="dark"] .vcard .play,
html[data-theme="dark"] .polaroid .play-dot{background:rgba(242,235,221,.94);color:#15213A}
html[data-theme="dark"] .hero-pp,
html[data-theme="dark"] .atlas-on .atlas-skip,
html[data-theme="dark"] .tour-on .tour-skip{background:rgba(27,40,64,.9);color:var(--ink)}
@media (max-width:860px){html[data-theme="dark"] .j-mini{background:rgba(27,40,64,.92);box-shadow:0 4px 16px rgba(0,0,0,.35)}}
html[data-theme="dark"] .hero-cover::after{background:linear-gradient(90deg,var(--paper) 0%,rgba(16,26,43,.92) 32%,rgba(16,26,43,0) 58%)}
@media (max-width:860px){html[data-theme="dark"] .hero-cover::after{background:linear-gradient(180deg,rgba(16,26,43,0) 55%,var(--paper) 100%)}}
html[data-theme="dark"] .atlas-on .atlas-fade{background:linear-gradient(90deg,var(--paper) 0,var(--paper) 34%,rgba(16,26,43,.9) 42%,rgba(16,26,43,.45) 50%,rgba(16,26,43,0) 60%)}
@media (max-width:860px){
  html[data-theme="dark"] .atlas-on .atlas-fade{background:none}
  html[data-theme="dark"] .atlas-on .beat,html[data-theme="dark"] .atlas-on .atlas-kicker{background:linear-gradient(180deg,rgba(16,26,43,0) 0,rgba(16,26,43,.95) 64px,var(--paper) 100%)}
  html[data-theme="dark"] .tour-on .beat,html[data-theme="dark"] .tour-on .tour-kicker{background:linear-gradient(180deg,rgba(16,26,43,0) 0,rgba(16,26,43,.94) 70px,var(--paper) 100%)}
}
html[data-theme="dark"] .lens-ring{box-shadow:0 0 0 5px rgba(16,26,43,.55),0 6px 24px rgba(0,0,0,.5)}
html[data-theme="dark"] .scroll-cue--dark{color:#F6F2EA;text-shadow:0 1px 8px rgba(9,20,34,.8);background:radial-gradient(closest-side,rgba(12,22,38,.5),rgba(12,22,38,0))}

/* connect hero (already navy): only the controls that used ivory-on-ink need care */
html[data-theme="dark"] .hc-hero .hc-assist:hover{color:#15213A}
html[data-theme="dark"] .hc-hero .hc-book,html[data-theme="dark"] .lens-btn[aria-pressed=true]{background:#C2452F;color:#fff}
html[data-theme="dark"] .hc-hero .hc-book:hover{background:#A93A27}

/* small diagram fills that were hard-coded blue */
html[data-theme="dark"] .flow-b{fill:var(--blue)}
html[data-theme="dark"] .flow-r{fill:var(--red)}

/* ---------- engravings printed on ivory ----------
   framed (prints, polaroids, door cards, plate): a dimmed paper plate inside its dark mount */
html[data-theme="dark"] img[src*="assets/entradas/"],
html[data-theme="dark"] img[src*="hero-gravura"],
html[data-theme="dark"] img[src*="mapa-gravura"]:not(.plate-art > img),
html[data-theme="dark"] video[poster*="hero-gravura"]{filter:var(--plate-dim)}
/* loose (no mount, blended into the page): the same engraving in white ink on the night paper */
html[data-theme="dark"] .study-stage{mix-blend-mode:lighten}
html[data-theme="dark"] .study-stage img{filter:invert(1) hue-rotate(180deg) sepia(.1) brightness(.92) contrast(1.15)}
html[data-theme="dark"] .plate-art{background:#C4BAA6}
html[data-theme="dark"] .plate-art > img{filter:sepia(.1)}
/* multiply only works on ivory: on night paper the engraving goes back to normal blending, dimmed like a plate */
html[data-theme="dark"] .hero-cover .hero-art,
html[data-theme="dark"] .face-img,
html[data-theme="dark"] .tour-cam img,
html[data-theme="dark"] .diptych img,
html[data-theme="dark"] .sumi-fig > img{mix-blend-mode:normal;filter:var(--plate-dim)}
/* the atlas plate is an ivory print: its overlays keep the daylight inks */
html[data-theme="dark"] .plate-art{--card:#FFFDF8;--rule:#DDD3C1;--ink:#15213A;--ink-2:#36415A;--ink-3:#545E75;--blue:#2A47A6;--red:#B83A26}

/* Language switch PT | EN (2026-10-08): plain links to the equivalent page, nothing remembered */
.lang-sw{order:4;flex:none;display:flex;align-items:center;gap:2px;margin-left:-10px;font:600 .78rem/1 var(--sans);letter-spacing:.08em}
.lang-sw a,.lang-sw [aria-current]{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:44px;padding:0 6px;border-radius:999px;color:var(--ink-3);text-decoration:none;transition:color .3s}
.lang-sw a:hover{color:var(--ink)}
.lang-sw a:focus-visible{outline:2.5px solid var(--blue);outline-offset:1px}
.lang-sw [aria-current]{color:var(--ink)}
.lang-sw .sep{color:var(--rule);font-weight:400}
@media (max-width:1000px){.lang-sw{order:1;margin-left:auto;margin-right:-6px}.lang-sw ~ .theme-btn{margin-left:0}}
.lang-note{font:500 .8rem/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:.7em 0 0}