/* ==========================================================================
   #06 P-SERIES PRESENTATION PREVIEW (slice 1) -- document-level styles
   --------------------------------------------------------------------------
   The bound designs (D1 Persona Studio R3.1, D2 Home V1.2, D3 Console) are
   rendered inside shadow roots by js/screens-persona-r31.js,
   js/screens-home-v12.js and js/console-r31.js, so their CSS applies
   verbatim without colliding with app.css. This file holds only what must
   live at document level:
     1. @property registrations (shadow trees cannot register them) so the
        D1 theme transition and the D2 sky transition animate;
     2. whole-app theming hooks for the live screens when a partner colour
        other than Vivian Original is active (VIVIAN_THEME writes the token
        values on <html> and sets data-vivian-theme);
     3. semantic invariance: the live focus ring is pinned to its Original
        value so theming can never re-colour focus (status/role tokens in
        tokens.css are literals and are never written by the engine);
     4. the live shell chrome steps aside on the #06 routes.
   ========================================================================== */

/* 1. registrations (D1 lines 10-28, D2 lines 4-8) */
@property --amber-100{syntax:'<color>';inherits:true;initial-value:#ffe7c2}
@property --amber-300{syntax:'<color>';inherits:true;initial-value:#f7c58a}
@property --amber-500{syntax:'<color>';inherits:true;initial-value:#f2a35c}
@property --amber-600{syntax:'<color>';inherits:true;initial-value:#e8823f}
@property --amber-700{syntax:'<color>';inherits:true;initial-value:#cf6a2b}
@property --violet-200{syntax:'<color>';inherits:true;initial-value:#d9d2ff}
@property --violet-300{syntax:'<color>';inherits:true;initial-value:#c3b8fb}
@property --violet-400{syntax:'<color>';inherits:true;initial-value:#a897f7}
@property --violet-500{syntax:'<color>';inherits:true;initial-value:#8b7cf5}
@property --violet-600{syntax:'<color>';inherits:true;initial-value:#6f5ce6}
@property --violet-700{syntax:'<color>';inherits:true;initial-value:#5945c4}
@property --bg-void{syntax:'<color>';inherits:true;initial-value:#0a0913}
@property --text-primary{syntax:'<color>';inherits:true;initial-value:#f6efe4}
@property --text-secondary{syntax:'<color>';inherits:true;initial-value:#bcb4c6}
@property --text-tertiary{syntax:'<color>';inherits:true;initial-value:#837c93}
@property --text-on-amber{syntax:'<color>';inherits:true;initial-value:#241305}
@property --border-amber{syntax:'<color>';inherits:true;initial-value:#c8874f}
@property --border-violet{syntax:'<color>';inherits:true;initial-value:#7c6edc}
@property --edge{syntax:'<color>';inherits:true;initial-value:#6c6874}
@property --sky1{syntax:'<color>';inherits:true;initial-value:#141026}
@property --sky2{syntax:'<color>';inherits:true;initial-value:#120e1c}
@property --sky3{syntax:'<color>';inherits:true;initial-value:#0a0811}
@property --orb{syntax:'<color>';inherits:true;initial-value:rgba(0,0,0,0)}
@property --stars{syntax:'<number>';inherits:true;initial-value:0}

/* 2. whole-app theming: live tokens that tokens.css spells as literals are
   re-expressed from the themed scale (D1 formulas). Inactive at Original. */
:root[data-vivian-theme] {
  --amber-glow: color-mix(in srgb, var(--amber-500) 45%, transparent);
  --amber-glow-soft: color-mix(in srgb, var(--amber-500) 18%, transparent);
  --violet-glow: color-mix(in srgb, var(--violet-500) 40%, transparent);
  --violet-glow-soft: color-mix(in srgb, var(--violet-500) 16%, transparent);
  --border-amber-soft: color-mix(in srgb, var(--amber-500) 22%, transparent);
  --border-violet-soft: color-mix(in srgb, var(--violet-500) 22%, transparent);
  transition: --amber-100 .9s, --amber-300 .9s, --amber-500 .9s, --amber-600 .9s, --amber-700 .9s,
    --violet-200 .9s, --violet-300 .9s, --violet-400 .9s, --violet-500 .9s, --violet-600 .9s, --violet-700 .9s,
    --bg-void 1.1s, --text-primary .9s, --text-secondary .9s, --text-tertiary .9s, --text-on-amber .9s,
    --border-amber .9s, --border-violet .9s;
}
:root[data-vivian-theme] #app-root {
  background:
    radial-gradient(560px 420px at 50% -6%, color-mix(in srgb, var(--amber-500) 16%, transparent), transparent 60%),
    radial-gradient(640px 520px at 84% 18%, color-mix(in srgb, var(--violet-500) 12%, transparent), transparent 62%),
    radial-gradient(700px 600px at 8% 82%, color-mix(in srgb, var(--violet-500) 8%, transparent), transparent 60%),
    var(--bg-void);
}

/* 3. semantic invariance for the live screens: app.css draws focus with
   var(--violet-400); pin it to the Original value whenever a theme is on. */
:root[data-vivian-theme] .icon-btn:focus-visible,
:root[data-vivian-theme] button:focus-visible,
:root[data-vivian-theme] input:focus-visible,
:root[data-vivian-theme] textarea:focus-visible,
:root[data-vivian-theme] select:focus-visible,
:root[data-vivian-theme] [tabindex]:focus-visible {
  outline-color: #a897f7;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-vivian-theme] { transition: none; }
}

/* 4. on the #06 routes the bound composition owns the whole viewport; the
   live status strip and dock step aside (they would otherwise stay in the
   keyboard order underneath). The Tester Preview banner stays visible. */
#device-frame:has(> #screen-root[data-route^="/p06/"]) > #status-root,
#device-frame:has(> #screen-root[data-route^="/p06/"]) > #dock-root {
  display: none;
}
#device-frame:has(> #screen-root[data-route^="/p06/"]) .preview-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
}
/* The router's entrance animation moves #screen-root with a transform,
   which would briefly re-anchor the fixed full-viewport host; fade only. */
#screen-root[data-route^="/p06/"].screen-enter { animation-name: vr31-screen-fade; }
@keyframes vr31-screen-fade { from { opacity: 0; } to { opacity: 1; } }
.vr31-host, .vr31-console-host { display: block; }

/* 5. Crystal colour (Owner answer 2026-10-07: "tint to the partner colour").
   The 3D crystal's glass is re-tinted by VIVIAN_THEME through
   mountCrystal3D.setTintAll (js/crystal3d.js additive API); Vivian Original
   restores its default materials exactly. crystal3d's flat SVG fallback
   (ui.js crystalSVG) already draws from the themed --violet-* / --amber-*
   tokens, so it follows the partner colour without any change to ui.js.
   Focus, status and role tokens stay untouched (section 3). */

/* 6. Owner directive R2 (crystal everywhere, js/crystal-everywhere.js): a bare
   flat crystal (no .crystal-wrap) is replaced by a same-size inline slot; the
   accent ring crystal3d adds belongs to ringed crystals only. */
.vr31-c3d-bare { display: inline-grid; place-items: center; position: relative; vertical-align: middle; flex-shrink: 0; }
.vr31-c3d-bare > .crystal-ring { display: none; }