/* 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;

  /* v0.8 — initial fixed header height fallback (JS will update precisely) */
  --fixedHeaderH: 120px;

  --danger:rgba(255,70,70,.35);
  --ok:rgba(60,255,140,.28);
  --warn:rgba(255,200,120,.9);
  --batteryTickerFg: color-mix(in srgb, var(--fg) 72%, var(--accentGreen) 28%);
  --batteryTickerGlow: rgb(from var(--accentGreen) r g b / .26);
  --batteryTickerInfo: var(--accentGreen);
  --batteryTickerWarn: var(--warn);
  --batteryTickerAlert: var(--danger);

  /* 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);


/* v0.1 — Design System (semantic variables; safe aliases) */
--color-bg-primary: var(--bg);
--color-bg-secondary: rgba(0,0,0,.22);
--color-bg-tertiary: rgba(255,255,255,.08);
--color-border-primary: rgba(255,255,255,.14);
--color-border-secondary: rgba(255,255,255,.22);
--color-text-primary: var(--fg);
--color-text-secondary: var(--muted);
--color-text-tertiary: rgba(242,242,242,.60);

--color-accent-blog: var(--accentGreen);
--color-accent-resources: var(--accent);
--color-accent-dashboard: #94a3b8;
--color-accent-primary: var(--accent);
--color-accent-settings: #2a9d8f;

--font-family-primary: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
--font-family-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;

--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-base: 16px;
--font-size-md: 18px;
--font-size-lg: 20px;
--font-size-xl: 24px;
--font-size-2xl: 28px;
--font-size-3xl: 32px;

--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

--line-height-tight: 1.2;
--line-height-normal: 1.4;
--line-height-relaxed: 1.6;
--line-height-loose: 1.8;

--letter-spacing-tight: -0.01em;
--letter-spacing-normal: 0em;
--letter-spacing-wide: 0.05em;
--letter-spacing-wider: 0.1em;

--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 40px;
--spacing-3xl: 48px;

--border-width-thin: 1px;
--border-width-base: 2px;
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: var(--radius);
--border-radius-full: 999px;

--shadow-sm: 0 1px 2px rgba(0,0,0,.12);
--shadow-md: 0 6px 16px rgba(0,0,0,.22);
--shadow-lg: 0 12px 30px rgba(0,0,0,.35);

--transition-fast: 150ms ease-in-out;
--transition-base: 200ms ease-in-out;
--transition-slow: 300ms ease-in-out;

--container-max-width: var(--pageW);
--container-padding: var(--gutter);

/* z-index scale (v3.0) — single source of truth for stacking contexts */
--z-base: 1;
--z-sticky: 10;
--z-header: 40;
--z-controls: 65;
--z-ritual-top: 80;
--z-dropdown: 120;
--z-dropdown-open: 130;
--z-prefs: 60;
--z-modal-backdrop: 1201;
--z-theme-undo: 9998;
--z-notify: 9999;
--z-dock: 10000;
--z-toast: 10010;
--z-dock-overlay: 10040;
--z-dock-sheet: 10050;
--z-tray-header: 10060;
--z-splash: 10100;
--z-guest-prompt: 10110;
--z-game-overlay: 12000;
--z-debug: 20000;
--z-dialog: 99998;
--z-skip-link: 999999;

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

  --danger:rgba(255,70,70,.22);
  --ok:rgba(0,160,90,.20);
  --warn:rgba(120,80,0,.75);
  --batteryTickerFg: color-mix(in srgb, var(--fg) 80%, var(--accentGreenReadable) 20%);
  --batteryTickerGlow: rgba(18,28,22,.18);
  --batteryTickerInfo: var(--accentGreenReadable);
  --batteryTickerWarn: var(--warn);
  --batteryTickerAlert: var(--danger);

  /* v1.06.5 — MENU theme variables (light) */
  --menu-btn-bg: rgba(255,255,255,.86);
  --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: #fbfaf8;
  --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);


/* v0.1 — Design System (light theme overrides) */
--color-bg-primary: var(--bg);
--color-bg-secondary: var(--card);
--color-bg-tertiary: rgba(0,0,0,.05);
--color-border-primary: rgba(0,0,0,.14);
--color-border-secondary: rgba(0,0,0,.22);
--color-text-primary: var(--fg);
--color-text-secondary: var(--muted);
--color-text-tertiary: rgba(0,0,0,.60);

}
: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.2.0-rc1.x — Background images: AVIF/WebP with PNG fallback (no perceptible change). */
@supports (background-image: -webkit-image-set(url("../img/portrait_black.webp") 1x)){
  :root{
    --site-bg-portrait-dark: -webkit-image-set(
      url("../img/portrait_black.avif") type("image/avif") 1x,
      url("../img/portrait_black.webp") type("image/webp") 1x,
      url("../img/portrait_black.png") 1x
    );
    --site-bg-landscape-dark: -webkit-image-set(
      url("../img/landscape_black.avif") type("image/avif") 1x,
      url("../img/landscape_black.webp") type("image/webp") 1x,
      url("../img/landscape_black.png") 1x
    );
    --site-bg-portrait-light: -webkit-image-set(
      url("../img/portrait_light.avif") type("image/avif") 1x,
      url("../img/portrait_light.webp") type("image/webp") 1x,
      url("../img/portrait_light.png") 1x
    );
    --site-bg-landscape-light: -webkit-image-set(
      url("../img/landscape_light.avif") type("image/avif") 1x,
      url("../img/landscape_light.webp") type("image/webp") 1x,
      url("../img/landscape_light.png") 1x
    );
  }
}
@supports (background-image: image-set(url("../img/portrait_black.webp") type("image/webp") 1x)){
  :root{
    --site-bg-portrait-dark: image-set(
      url("../img/portrait_black.avif") type("image/avif") 1x,
      url("../img/portrait_black.webp") type("image/webp") 1x,
      url("../img/portrait_black.png") type("image/png") 1x
    );
    --site-bg-landscape-dark: image-set(
      url("../img/landscape_black.avif") type("image/avif") 1x,
      url("../img/landscape_black.webp") type("image/webp") 1x,
      url("../img/landscape_black.png") type("image/png") 1x
    );
    --site-bg-portrait-light: image-set(
      url("../img/portrait_light.avif") type("image/avif") 1x,
      url("../img/portrait_light.webp") type("image/webp") 1x,
      url("../img/portrait_light.png") type("image/png") 1x
    );
    --site-bg-landscape-light: image-set(
      url("../img/landscape_light.avif") type("image/avif") 1x,
      url("../img/landscape_light.webp") type("image/webp") 1x,
      url("../img/landscape_light.png") type("image/png") 1x
    );
  }
}


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); }
}

/*
  v2.0 Beta 12 — Bitcoin preset adopts “Markets” visual language globally.
  Goal: the Bitcoin preset becomes the default “markets” look across the site
  (stats, dashboard pages, lists), without touching RitualPlus or Paper.

  This is token-driven on purpose: we keep the diff surface small and let
  existing components inherit colors/typography via variables.
*/
html[data-ps-preset="bitcoin"]{
  /* Core palette */
  --bg: #050608;
  --fg: rgba(240,255,250,.92);
  --muted: rgba(240,255,250,.64);
  --card: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.12);

  /* Accents */
  --accent: #f7931a; /* Bitcoin orange */
  --accentGreen: rgb(90,255,160);
  --accentGreenReadable: rgb(60,220,140);

  /* Design system accents */
  --color-accent-dashboard: var(--accentGreenReadable);
  --color-accent-resources: var(--accent);
  --color-accent-primary: var(--accent);
  --color-accent-settings: var(--accentGreenReadable);

  /* Menu tone (subtle “terminal/markets”) */
  --menu-btn-bg: rgba(0,0,0,.92);
  --menu-btn-fg: rgba(240,255,250,.88);
  --menu-btn-border: rgba(90,255,160,.18);
  --menu-btn-inset: rgba(90,255,160,.06);

  --menu-panel-bg: #07080b;
  --menu-panel-fg: rgba(240,255,250,.92);
  --menu-panel-border: rgba(90,255,160,.16);
  --menu-panel-shadow: 0 18px 48px rgba(0,0,0,.62), 0 0 0 1px rgba(90,255,160,.08) inset;

  --menu-link-bg: rgba(255,255,255,.05);
  --menu-link-fg: rgba(240,255,250,.90);
  --menu-link-border: rgba(90,255,160,.14);
  --menu-link-hover-bg: rgba(90,255,160,.08);
  --menu-link-hover-border: rgba(90,255,160,.28);

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

  /* Background: keep the site clean but not flat */
  --site-bg-image:
    radial-gradient(1200px 800px at 50% -20%, rgba(90,255,160,.10), rgba(0,0,0,0) 56%),
    radial-gradient(900px 600px at 18% 26%, rgba(247,147,26,.06), rgba(0,0,0,0) 62%),
    linear-gradient(#050608, #050a0c);

  /* Markets polish pack (1+2+3):
     1) numbers: tabular + mono for metrics
     2) cards/borders: consistent radius/border/shadow
     3) background: reduce banding/noise, keep subtle gradients
  */

  /* Typography helpers */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  /* Numeric rhythm */
  --num-fg: rgba(240,255,250,.94);
  --num-muted: rgba(240,255,250,.62);

  /* Card system */
  --card-radius: 16px;
  --card-bg: rgba(255,255,255,.05);
  --card-border: rgba(90,255,160,.16);
  --card-border-strong: rgba(90,255,160,.26);
  --card-shadow: 0 14px 38px rgba(0,0,0,.55), 0 0 0 1px rgba(90,255,160,.08) inset;
  --card-shadow-soft: 0 10px 28px rgba(0,0,0,.45);

  /* Battery ticker (explicit for bitcoin green) */
  --batteryTickerFg: color-mix(in srgb, var(--fg) 72%, var(--accentGreen) 28%);
  --batteryTickerGlow: rgb(from var(--accentGreen) r g b / .26);

  /* Background safety net (less banding on iOS) */
  --site-bg-image:
    radial-gradient(1100px 760px at 50% -18%, rgba(90,255,160,.085), rgba(0,0,0,0) 58%),
    radial-gradient(860px 560px at 18% 28%, rgba(247,147,26,.05), rgba(0,0,0,0) 64%),
    linear-gradient(#050608, #05090b);
}

/* Invaders: deep blue + neon cyan/magenta, balanced glow for long reading sessions. */
html[data-ps-preset="invaders"]{
  /* Core palette */
  --bg: #050814;
  --fg: rgba(236,245,255,.92);
  --muted: rgba(236,245,255,.66);
  --card: rgba(255,255,255,.055);
  --border: rgba(255,79,207,.22);

  /* Accents */
  --accent: #ff4fcf;
  --accent2: #7ef2ff;
  --accentGreen: #ff4fcf;
  --accentGreenReadable: #ff70d8;
  --ok: rgba(255,79,207,.26);

  /* Design system accents */
  --color-accent-blog: var(--accent);
  --color-accent-dashboard: var(--accent);
  --color-accent-resources: var(--accent2);
  --color-accent-primary: var(--accent);
  --color-accent-settings: var(--accent);

  /* Menu tone */
  --menu-btn-bg: rgba(6,10,24,.92);
  --menu-btn-fg: rgba(236,245,255,.90);
  --menu-btn-border: rgba(255,79,207,.30);
  --menu-btn-inset: rgba(255,79,207,.12);

  --menu-panel-bg: #070c1e;
  --menu-panel-fg: rgba(236,245,255,.92);
  --menu-panel-border: rgba(255,79,207,.24);
  --menu-panel-shadow: 0 18px 48px rgba(0,0,0,.62), 0 0 0 1px rgba(255,79,207,.10) inset;

  --menu-link-bg: rgba(255,255,255,.05);
  --menu-link-fg: rgba(236,245,255,.90);
  --menu-link-border: rgba(255,79,207,.20);
  --menu-link-hover-bg: color-mix(in srgb, var(--accent) 11%, transparent);
  --menu-link-hover-border: color-mix(in srgb, var(--accent) 64%, var(--accent2) 36%);

  --menu-overlay-bg: rgba(3,6,18,.76);

  /* Background */
  --site-bg-image:
    radial-gradient(1200px 820px at 52% -20%, rgba(255,79,207,.14), rgba(0,0,0,0) 58%),
    radial-gradient(900px 620px at 84% 18%, rgba(255,79,207,.11), rgba(0,0,0,0) 62%),
    radial-gradient(820px 580px at 10% 72%, rgba(126,242,255,.06), rgba(0,0,0,0) 64%),
    linear-gradient(#050714, #080a1f 56%, #07061a);

  /* Card system */
  --card-radius: 16px;
  --card-bg: rgba(255,255,255,.055);
  --card-border: rgba(255,79,207,.22);
  --card-border-strong: rgba(255,79,207,.30);
  --card-shadow: 0 14px 36px rgba(0,0,0,.56), 0 0 0 1px rgba(255,79,207,.10) inset;
  --card-shadow-soft: 0 10px 26px rgba(0,0,0,.44);
}

@media (max-width: 680px){
  html[data-ps-preset="invaders"]{
    --menu-panel-shadow: 0 14px 34px rgba(0,0,0,.52), 0 0 0 1px rgba(255,79,207,.08) inset;
    --card-shadow: 0 10px 24px rgba(0,0,0,.48), 0 0 0 1px rgba(255,79,207,.08) inset;
    --card-shadow-soft: 0 8px 18px rgba(0,0,0,.38);
  }
}

/* Paper stays the only true light/reading mode; keep its original artwork mapping. */
html[data-ps-preset="paper"]{
  /* v1.12.x PATCH4 — Paper warm-parchment profile (deeper bg, stronger card contrast). */
  --paper-bg: #c4bfb5;
  --paper-surface: rgba(220,215,206,.92);
  --paper-surface-soft: rgba(216,211,202,.86);
  --paper-surface-strong: rgba(226,221,212,.94);
  --paper-shell-bg: color-mix(in srgb, var(--paper-surface-strong, rgba(226,221,212,.94)) 94%, transparent);
  --paper-line: rgba(34,30,24,.22);
  --paper-line-strong: rgba(34,30,24,.34);
  --paper-overlay: rgba(0,0,0,.28);

  /* Map core semantic tokens so all existing consumers stay modular. */
  --bg: var(--paper-bg);
  --card: var(--paper-surface);
  --border: var(--paper-line);

  --site-bg-image: none;

  /* Accent system (ink/sepia for scholarly reading) */
  --color-accent-blog: #4a6741;
  --color-accent-dashboard: #5a6670;
  --color-accent-resources: #8b4513;
  --color-accent-primary: #a0522d;
  --color-accent-settings: #4a6741;

  /* Menu (warm parchment — overrides generic light) */
  --menu-btn-bg: rgba(196,191,181,.92);
  --menu-btn-fg: rgba(34,30,24,.86);
  --menu-btn-border: rgba(34,30,24,.14);
  --menu-btn-inset: rgba(34,30,24,.06);

  --menu-panel-bg: #d5d0c7;
  --menu-panel-fg: #1a1714;
  --menu-panel-border: rgba(34,30,24,.14);
  --menu-panel-shadow: 0 18px 48px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.40) inset;

  --menu-link-bg: rgba(0,0,0,.03);
  --menu-link-fg: rgba(34,30,24,.88);
  --menu-link-border: rgba(34,30,24,.12);
  --menu-link-hover-bg: rgba(0,0,0,.06);
  --menu-link-hover-border: rgba(34,30,24,.22);

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

  /* Card system (parchment) */
  --card-radius: 16px;
  --card-bg: var(--paper-surface);
  --card-border: var(--paper-line);
  --card-border-strong: var(--paper-line-strong);
  --card-shadow: 0 12px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.36) inset;
  --card-shadow-soft: 0 8px 22px rgba(0,0,0,.13);
}

/* RitualPlus: warm dark with red/amber accents, ritualistic atmosphere. */
html[data-ps-preset="ritualplus"]{
  /* Core palette */
  --bg: #0a0608;
  --fg: rgba(255,240,235,.92);
  --muted: rgba(255,240,235,.66);
  --card: rgba(255,255,255,.05);
  --border: rgba(255,90,90,.20);

  /* Accents */
  --accent: #ff5a5a;
  --accent2: #ffb347;
  --accentGreen: #ff5a5a;
  --accentGreenReadable: #ff7070;
  --ok: rgba(255,90,90,.26);

  /* Design system accents */
  --color-accent-blog: var(--accent);
  --color-accent-dashboard: var(--accent2);
  --color-accent-resources: var(--accent2);
  --color-accent-primary: var(--accent);
  --color-accent-settings: var(--accent2);

  /* Menu tone (ritual dark — red tinting) */
  --menu-btn-bg: rgba(10,6,8,.92);
  --menu-btn-fg: rgba(255,240,235,.90);
  --menu-btn-border: rgba(255,90,90,.22);
  --menu-btn-inset: rgba(255,90,90,.08);

  --menu-panel-bg: #0c0709;
  --menu-panel-fg: rgba(255,240,235,.92);
  --menu-panel-border: rgba(255,90,90,.18);
  --menu-panel-shadow: 0 18px 48px rgba(0,0,0,.62), 0 0 0 1px rgba(255,90,90,.08) inset;

  --menu-link-bg: rgba(255,255,255,.05);
  --menu-link-fg: rgba(255,240,235,.90);
  --menu-link-border: rgba(255,90,90,.16);
  --menu-link-hover-bg: rgba(255,90,90,.10);
  --menu-link-hover-border: rgba(255,90,90,.28);

  --menu-overlay-bg: rgba(6,3,4,.76);

  /* Background */
  --site-bg-image:
    radial-gradient(1100px 780px at 48% -18%, rgba(255,90,90,.12), rgba(0,0,0,0) 56%),
    radial-gradient(860px 580px at 16% 24%, rgba(255,179,71,.06), rgba(0,0,0,0) 62%),
    linear-gradient(#0a0608, #0c080a);

  /* Card system */
  --card-radius: 16px;
  --card-bg: rgba(255,255,255,.05);
  --card-border: rgba(255,90,90,.18);
  --card-border-strong: rgba(255,90,90,.28);
  --card-shadow: 0 14px 38px rgba(0,0,0,.56), 0 0 0 1px rgba(255,90,90,.08) inset;
  --card-shadow-soft: 0 10px 28px rgba(0,0,0,.44);

  /* Battery ticker */
  --batteryTickerFg: color-mix(in srgb, var(--fg) 72%, var(--accent) 28%);
  --batteryTickerGlow: rgb(from var(--accent) r g b / .22);
}

/* Mobile shadow reduction — bitcoin, paper, ritualplus (invaders above) */
@media (max-width: 680px){
  html[data-ps-preset="bitcoin"]{
    --menu-panel-shadow: 0 14px 34px rgba(0,0,0,.52), 0 0 0 1px rgba(90,255,160,.06) inset;
    --card-shadow: 0 10px 24px rgba(0,0,0,.48), 0 0 0 1px rgba(90,255,160,.06) inset;
    --card-shadow-soft: 0 8px 18px rgba(0,0,0,.38);
  }
  html[data-ps-preset="ritualplus"]{
    --menu-panel-shadow: 0 14px 34px rgba(0,0,0,.52), 0 0 0 1px rgba(255,90,90,.06) inset;
    --card-shadow: 0 10px 24px rgba(0,0,0,.48), 0 0 0 1px rgba(255,90,90,.06) inset;
    --card-shadow-soft: 0 8px 18px rgba(0,0,0,.38);
  }
  html[data-ps-preset="paper"]{
    --card-shadow: 0 8px 20px rgba(0,0,0,.10), 0 0 0 1px rgba(255,255,255,.30) inset;
    --card-shadow-soft: 0 6px 14px rgba(0,0,0,.07);
  }
}