/* ============================================================================
   Titan Reliquary · shared atmosphere system (themes agent)
   Loads after styles.css + wing styles, before styles/atmo/<name>.css.
   Contract + conventions: notes/agents/themes.md · audit: tools/themes/audit.js
   ----------------------------------------------------------------------------
   1. Semantic tokens with safe fallbacks (every atmosphere gets them; per-theme
      files may override). Wing code can adopt them with a fallback, e.g.
        color: var(--on-gold, #0b0a08);  box-shadow: var(--elev-2, var(--shadow));
   ========================================================================== */

:root {
  --scheme: dark;
  /* text on a solid --gold fill (buttons, active pills, badges) */
  --on-gold: #0b0a08;
  /* keyboard focus ring colour; must be >= 3:1 against bg and surface */
  --focus: var(--gold-soft);
  /* elevation: 1 = resting card, 2 = hover / raised, 3 = sheets, drawers, popovers */
  --elev-1: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 10px rgba(0, 0, 0, 0.42);
  --elev-2: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 32px rgba(0, 0, 0, 0.55);
  --elev-3: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 80px rgba(0, 0, 0, 0.72);
  /* dim layer behind sheets and drawers */
  --scrim: rgba(0, 0, 0, 0.62);
}

/* Light atmospheres: warm paper shadows instead of black voids */
html[data-atmo="conservator"],
html[data-atmo="notepad"] {
  --scheme: light;
  --scrim: rgba(40, 32, 20, 0.38);
}
html[data-atmo="conservator"] {
  --on-gold: #fffaf0;
  --elev-1: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 2px rgba(60, 45, 20, 0.10), 0 3px 10px rgba(60, 45, 20, 0.08);
  --elev-2: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 4px rgba(60, 45, 20, 0.10), 0 12px 28px rgba(60, 45, 20, 0.16);
  --elev-3: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 10px rgba(60, 45, 20, 0.12), 0 28px 70px rgba(60, 45, 20, 0.24);
}
html[data-atmo="notepad"] {
  --on-gold: #ffffff;
  --focus: #0033cc;
  --elev-1: none;
  --elev-2: none;
  --elev-3: 0 0 0 1px #000000;
}

/* Native controls, scrollbars and form fields follow the atmosphere */
html[data-atmo] { color-scheme: var(--scheme); }

/* ---------------------------------------------------------------------------
   2. Keyboard focus: one visible ring in every atmosphere, 3px so an older
      viewer can find it; the 2px offset keeps a gap of page colour between the
      ring and accent-coloured controls. (Component shadows are left alone.)
   ------------------------------------------------------------------------- */
html[data-atmo] :focus-visible {
  outline: 3px solid var(--focus, var(--gold));
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   3. Text on solid accent fills follows --on-gold. These components paint
      background: var(--gold) with a hard-coded near-black label, which fails on
      atmospheres whose accent is dark (Conservator, Plaintext).
   ------------------------------------------------------------------------- */
html[data-atmo] :is(.lofi-bar.collapsed .lofi-play, .hero-spatial-launcher .hsl-pill, .lab-badge,
  .ex-nav-btn:hover, .placard-inspect-btn:hover, .tray-tab.active, .term-asset-btn.active,
  .ex-ctrl-btn.active, .ex-ctrl-btn.flip-btn:hover) {
  color: var(--on-gold);
}

/* ---------------------------------------------------------------------------
   4. Atmosphere cross-fade: styles.css eases background/border/text colour on
      the main surfaces when the atmosphere changes; stand it down for reduced
      motion (it was unguarded).
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body, .card, .tile, .metal-tile, .album-card, .latest-card, .sheet-card,
  .drawer-inner, .foot, .tabs, .lofi-bar, .ambient-panel { transition: none; }
}

/* ---------------------------------------------------------------------------
   5. Atmosphere picker: crest on every swatch (wings/themes.js injects it),
      larger secondary text for older eyes, clearer pressed/current states.
      Per-theme files may set --sw-ink inside their .sw-<name> rule.
   ------------------------------------------------------------------------- */
.atmo-swatch { position: relative; overflow: hidden; }
.atmo-swatch-crest {
  position: absolute; right: 12px; top: 50%;
  width: 50px; height: 50px; transform: translateY(-50%);
  color: var(--sw-ink, rgba(255, 255, 255, 0.85));
  opacity: 0.92;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.sw-afterhours { --sw-ink: #e6d6a8; }
.sw-conservator { --sw-ink: #7a2e2e; }
.sw-conservator .atmo-swatch-crest, .sw-notepad .atmo-swatch-crest { filter: none; }
.sw-colossus { --sw-ink: #ffd98c; }
.sw-nocturne { --sw-ink: #ecd096; }
.sw-odyssey { --sw-ink: #ffd9a0; }
.sw-cursedwing { --sw-ink: #ff7a6b; }
.sw-kaleido { --sw-ink: #ffffff; }
.sw-abyss { --sw-ink: #a5ecf5; }
.sw-neon { --sw-ink: #8ef7ff; }
.sw-notepad { --sw-ink: #111111; }
.sw-construct { --sw-ink: #7dffaa; }
.sw-xeno { --sw-ink: #a7f3e0; }
.sw-solaris { --sw-ink: #fde68a; }
.sw-alchemist { --sw-ink: #a7f3d0; }
.sw-glacier { --sw-ink: #f0f9ff; }
.sw-valhalla { --sw-ink: #fcd34d; }
.sw-dynasty { --sw-ink: #fef08a; }
.sw-zen { --sw-ink: #ecfccb; }
.sw-samadhi { --sw-ink: #ffedd5; }
.sw-silkroad { --sw-ink: #fcd34d; }
/* styles-20 themes (token-only: their swatch art lives here, always loaded, because the picker shows every theme) */
.sw-arcade { --sw-ink: #ffd23f; background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 6px),
  linear-gradient(0deg, #ff6bd6 0 8%, transparent 8%), linear-gradient(180deg, #0b0820 0%, #211a4e 70%, #40e0d0 140%); }
.sw-pulp { --sw-ink: #17120d; background: radial-gradient(rgba(179,16,31,.35) 1.4px, transparent 1.9px) 0 0 / 8px 8px,
  linear-gradient(135deg, #ffd400 0 30%, #f6ecd2 30% 100%); box-shadow: inset 0 0 0 3px #17120d; }
.sw-drafting { --sw-ink: #f3f8ff; background: linear-gradient(rgba(243,248,255,.18) 1px, transparent 1px) 0 0 / 14px 14px,
  linear-gradient(90deg, rgba(243,248,255,.18) 1px, transparent 1px) 0 0 / 14px 14px, radial-gradient(circle at 62% 50%, transparent 30%, rgba(255,210,122,.8) 31% 32%, transparent 33%), #0c2a50; }
.sw-diorama { --sw-ink: #2a2320; background: radial-gradient(circle at 30% 40%, #f4b6c2 0 16%, transparent 17%), radial-gradient(circle at 68% 58%, #a8d8ea 0 18%, transparent 19%),
  radial-gradient(circle at 52% 26%, #ffe08a 0 11%, transparent 12%), linear-gradient(160deg, #fffaf5, #efe4d7); }
.sw-bauhaus { --sw-ink: #111111; background: radial-gradient(circle at 30% 42%, #c32a17 0 22%, transparent 23%),
  linear-gradient(90deg, transparent 58%, #1d4ea1 58% 82%, transparent 82%), linear-gradient(0deg, #f2c230 0 18%, transparent 18%), #f2efe6; }
.sw-terminal { --sw-ink: #ffc43d; background: linear-gradient(transparent calc(50% - 1px), #000 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
  repeating-linear-gradient(90deg, #171b20 0 18px, #0d0f12 18px 20px); }
html[data-atmo] .atmo-card-desc { font-size: 0.86rem; line-height: 1.5; }
html[data-atmo] .atmo-card-pair { font-size: 0.78rem; }
html[data-atmo] .atmo-card.current::after { font-size: 0.7rem; }
html[data-atmo] .atmo-card:hover { box-shadow: var(--elev-2); }
html[data-atmo] .atmo-card.current { box-shadow: 0 0 0 1px var(--gold), var(--elev-1); }

/* ---------------------------------------------------------------------------
   6. Smooth relighting: the core colour tokens are registered as <color> so the
      whole room eases from one atmosphere to the next (everything that reads a
      token, not only the few surfaces styles.css transitions). Only these 12
      tokens animate, only when the atmosphere changes, for 0.6s. Reduced motion
      and browsers without @property switch instantly. Registration also means a
      theme that sets an invalid colour falls back to the After Hours value
      instead of breaking the page. (No JS reads these tokens as strings.)
   ------------------------------------------------------------------------- */
@property --bg { syntax: "<color>"; inherits: true; initial-value: #060605; }
@property --bg2 { syntax: "<color>"; inherits: true; initial-value: #0b0a08; }
@property --surface { syntax: "<color>"; inherits: true; initial-value: #0e0d0a; }
@property --surface2 { syntax: "<color>"; inherits: true; initial-value: #161310; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #f2ead8; }
@property --muted { syntax: "<color>"; inherits: true; initial-value: #9a927c; }
@property --faint { syntax: "<color>"; inherits: true; initial-value: #615a48; }
@property --gold { syntax: "<color>"; inherits: true; initial-value: #c8a94a; }
@property --gold-soft { syntax: "<color>"; inherits: true; initial-value: #e8d9a8; }
@property --gold-deep { syntax: "<color>"; inherits: true; initial-value: #7a6a35; }
@property --line { syntax: "<color>"; inherits: true; initial-value: rgba(200, 169, 74, 0.14); }
@property --line-strong { syntax: "<color>"; inherits: true; initial-value: rgba(200, 169, 74, 0.32); }
@media (prefers-reduced-motion: no-preference) {
  html[data-atmo] {
    transition-property: --bg, --bg2, --surface, --surface2, --ink, --muted, --faint,
      --gold, --gold-soft, --gold-deep, --line, --line-strong;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}