/* psychoSocial — Tokens (v1.07.3)
   Single source of truth for design tokens and theme variables.
   (Extracted from base.css to prevent light/dark drift.)
*/

:root{
  --accent: rgb(255,90,90);
  --accentGreen: rgb(60,255,140);
  --accentGreenReadable: rgb(30,200,110);
  --bg:#000;
  --fg:#f2f2f2;
  --muted:rgba(242,242,242,.7);
  --card:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.12);
  --radius:18px;

  
  --pageW:860px;
  --pageW-narrow:420px;
  --gutter:14px;

  --danger:rgba(255,70,70,.35);
  --ok:rgba(60,255,140,.28);
  --warn:rgba(255,200,120,.9);

  /* v1.06.5 — MENU (shared; theme differences via variables only)
     Goal: keep light/dark identical for geometry/shadow/padding; only colors differ. */
  --menu-btn-bg: rgba(0,0,0,.92);
  --menu-btn-fg: rgba(242,242,242,.92);
  --menu-btn-border: rgba(255,255,255,.12);
  --menu-btn-inset: rgba(255,255,255,.06);

  --menu-panel-bg: #0b0b0b;
  --menu-panel-fg: #f5f5f5;
  --menu-panel-border: rgba(255,255,255,.12);
  --menu-panel-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;

  --menu-link-bg: rgba(255,255,255,.06);
  --menu-link-fg: rgba(242,242,242,.92);
  --menu-link-border: rgba(255,255,255,.18);
  --menu-link-hover-bg: rgba(255,255,255,.10);
  --menu-link-hover-border: rgba(255,255,255,.28);

  --menu-overlay-bg: rgba(0,0,0,.72);

}
html[data-theme="light"]{
  
  --bg:#f3f3f3;
  --fg:#0b0b0b;
  --muted:rgba(0,0,0,.62);
  --card:rgba(255,255,255,.78);
  --border:rgba(0,0,0,.14);

  --danger:rgba(255,70,70,.22);
  --ok:rgba(0,160,90,.20);
  --warn:rgba(120,80,0,.75);

  /* v1.06.5 — MENU theme variables (light) */
  --menu-btn-bg: rgba(255,255,255,.92);
  --menu-btn-fg: rgba(0,0,0,.82);
  --menu-btn-border: rgba(0,0,0,.14);
  --menu-btn-inset: rgba(0,0,0,.06);

  --menu-panel-bg: #ffffff;
  --menu-panel-fg: #0b0b0b;
  --menu-panel-border: rgba(0,0,0,.12);
  --menu-panel-shadow: 0 18px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06) inset;

  --menu-link-bg: rgba(0,0,0,.02);
  --menu-link-fg: rgba(0,0,0,.86);
  --menu-link-border: rgba(0,0,0,.14);
  --menu-link-hover-bg: rgba(0,0,0,.05);
  --menu-link-hover-border: rgba(0,0,0,.22);

  --menu-overlay-bg: rgba(0,0,0,.45);

}
:root{
  --site-bg-portrait-dark: url('../img/portrait_black.png');
  --site-bg-landscape-dark: url('../img/landscape_black.png');
  --site-bg-portrait-light: url('../img/portrait_light.png');
  --site-bg-landscape-light: url('../img/landscape_light.png');

  /* Active background assets (selected by theme) */
  --site-bg-portrait: var(--site-bg-portrait-dark);
  --site-bg-landscape: var(--site-bg-landscape-dark);
  --site-bg-image: none;
}

/* v1.13.0-alpha3 — Background images: WebP with PNG fallback (no perceptible change). */
@supports (background-image: image-set(url("../img/portrait_black.webp") type("image/webp"))){
  :root{
    --site-bg-portrait-dark: image-set(url('../img/portrait_black.webp') type('image/webp'), url('../img/portrait_black.png') type('image/png'));
    --site-bg-landscape-dark: image-set(url('../img/landscape_black.webp') type('image/webp'), url('../img/landscape_black.png') type('image/png'));
    --site-bg-portrait-light: image-set(url('../img/portrait_light.webp') type('image/webp'), url('../img/portrait_light.png') type('image/png'));
    --site-bg-landscape-light: image-set(url('../img/landscape_light.webp') type('image/webp'), url('../img/landscape_light.png') type('image/png'));
  }
}

html[data-theme="light"]{
  --site-bg-portrait: var(--site-bg-portrait-light);
  --site-bg-landscape: var(--site-bg-landscape-light);
}
@media (orientation: portrait){
  body{ --site-bg-image: var(--site-bg-portrait); }
}
@media (orientation: landscape){
  body{ --site-bg-image: var(--site-bg-landscape); }
}