/* Optima solar appearance. All colors resolve via --tone-* tokens.
   Independent of Optima Logo Studio palettes. */
/* Register the palette tokens as <color> so stage changes can transition.
   Shadow-list and --logo-shadow-* tokens stay unregistered: they flip
   instantly, and logo-float.js parses --logo-shadow-ink as a raw string. */
@property --tone-canvas { syntax:'<color>'; inherits:true; initial-value:#F1F0EB; }
@property --tone-surface { syntax:'<color>'; inherits:true; initial-value:#F8F7F3; }
@property --tone-raised { syntax:'<color>'; inherits:true; initial-value:#FBFAF7; }
@property --tone-alt { syntax:'<color>'; inherits:true; initial-value:#E9EBE6; }
@property --tone-hero { syntax:'<color>'; inherits:true; initial-value:#EDEEE9; }
@property --tone-ink { syntax:'<color>'; inherits:true; initial-value:#243034; }
@property --tone-ink2 { syntax:'<color>'; inherits:true; initial-value:#344245; }
@property --tone-secondary { syntax:'<color>'; inherits:true; initial-value:#536165; }
@property --tone-border { syntax:'<color>'; inherits:true; initial-value:#CDD4D0; }
@property --tone-border-soft { syntax:'<color>'; inherits:true; initial-value:#DDE2DC; }
@property --tone-accent { syntax:'<color>'; inherits:true; initial-value:#344E4B; }
@property --tone-accent-wash { syntax:'<color>'; inherits:true; initial-value:#E2E9E4; }
@property --tone-deep { syntax:'<color>'; inherits:true; initial-value:#1C2627; }
@property --tone-on-deep { syntax:'<color>'; inherits:true; initial-value:#EDF1EC; }
@property --tone-on-deep-subtle { syntax:'<color>'; inherits:true; initial-value:#B8C9C1; }
@property --tone-grid { syntax:'<color>'; inherits:true; initial-value:rgba(51,64,61,.16); }
@property --tone-nav { syntax:'<color>'; inherits:true; initial-value:rgba(248,247,243,.94); }
@property --tone-chart-up { syntax:'<color>'; inherits:true; initial-value:#386B63; }
@property --tone-chart-base { syntax:'<color>'; inherits:true; initial-value:#243034; }
@property --tone-chart-down { syntax:'<color>'; inherits:true; initial-value:#5F7273; }
@property --tone-chart-band { syntax:'<color>'; inherits:true; initial-value:#E1E9E3; }
/* 5s cross-stage fade. Enabled via data-solar-animate only after the first
   painted frame so the initial stage applies instantly instead of fading in.
   Transitions retarget mid-flight, so slider drags blend continuously. */
:root[data-solar-animate] {
  transition:
    --tone-canvas 5s ease, --tone-surface 5s ease, --tone-raised 5s ease,
    --tone-alt 5s ease, --tone-hero 5s ease, --tone-ink 5s ease,
    --tone-ink2 5s ease, --tone-secondary 5s ease, --tone-border 5s ease,
    --tone-border-soft 5s ease, --tone-accent 5s ease, --tone-accent-wash 5s ease,
    --tone-deep 5s ease, --tone-on-deep 5s ease, --tone-on-deep-subtle 5s ease,
    --tone-grid 5s ease, --tone-nav 5s ease, --tone-chart-up 5s ease,
    --tone-chart-base 5s ease, --tone-chart-down 5s ease, --tone-chart-band 5s ease;
}
:root[data-solar-stage] {
  --appearance-ease: cubic-bezier(.22,.61,.36,1);
}
:root[data-solar-stage] .hero {
  /* Dark transparent wash over the actual canvas: never a brighter gradient. */
  background:
    radial-gradient(ellipse 75% 84% at 48% -24%, var(--logo-shadow-wash, rgba(7,14,13,.055)), transparent 73%),
    var(--tone-canvas);
}
:root[data-solar-stage] .hero::before { opacity: .13; }
:root[data-solar-stage] .metricbar { background: var(--tone-raised); }
:root[data-solar-stage] .btn { background: var(--tone-raised); color: var(--tone-ink2); border-color: var(--tone-border); }
:root[data-solar-stage] .btn.primary { background: var(--tone-ink); color: var(--tone-canvas); border-color: var(--tone-ink); }
:root[data-solar-stage] .btn.primary:hover { background: var(--tone-ink2); color: var(--tone-canvas); border-color: var(--tone-ink2); }
:root[data-solar-stage] .btn.dark { background: transparent; color: var(--tone-on-deep); border-color: var(--tone-border); }
:root[data-solar-stage] .btn.dark:hover { border-color: var(--tone-on-deep); }
:root[data-solar-stage] .footer,
:root[data-solar-stage] .statement { background: var(--tone-deep); }
:root[data-solar-stage] .menu { background: var(--tone-surface); }
.appearance-shell { position:relative; margin-left:12px; z-index:35; flex-shrink:0; font-family:var(--serif); }
.appearance-toggle {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  min-height:36px; padding:6px 10px; border-radius:9px;
  border:1px solid var(--tone-border); background:var(--tone-raised);
  color:var(--tone-ink); font:600 15px/1.2 var(--serif); cursor:pointer;
  user-select:none; -webkit-user-select:none; touch-action:none;
  transition:background .15s var(--appearance-ease),border-color .15s var(--appearance-ease);
}
.appearance-toggle .appearance-icon { display:inline-flex; color:var(--tone-accent); }
.appearance-toggle:hover { border-color:var(--tone-secondary); }
.appearance-panel {
  position:absolute; right:0; top:calc(100% + 12px);
  width:min(338px,calc(100vw - 30px)); padding:20px;
  border:1px solid var(--tone-border); border-radius:14px;
  background:var(--tone-raised); color:var(--tone-ink);
  box-shadow:0 18px 55px rgba(10,22,20,.16);
  font:16px/1.45 var(--serif);
}
.appearance-panel[hidden] { display:none!important; }
.appearance-heading { font-weight:700; font-size:19px; margin-bottom:5px; }
.appearance-description { display:block; color:var(--tone-secondary); font-size:15px; margin-bottom:15px; }
.appearance-panel input[type=range] {
  display:block; width:100%; height:30px; margin:0; cursor:pointer; accent-color:var(--tone-accent);
}
.appearance-ticks { display:flex; justify-content:space-between; gap:2px; color:var(--tone-secondary); font-size:13px; }
.appearance-ticks span { text-align:center; min-width:0; }
.appearance-current { font-size:15px; font-weight:700; margin-top:20px; color:var(--tone-ink); }
.appearance-status { font-size:14px; line-height:1.55; color:var(--tone-secondary); margin:3px 0 0; overflow-wrap:anywhere; }
.appearance-location { margin-top:12px; padding:7px 9px; border:1px solid var(--tone-border); border-radius:7px; background:var(--tone-surface); color:var(--tone-ink); font:600 14px var(--serif); cursor:pointer; }
.appearance-location[hidden] { display:none!important; }
.appearance-location:disabled { opacity:.5; cursor:wait; }
.appearance-toggle:focus-visible,.appearance-panel input:focus-visible,.appearance-location:focus-visible { outline:2px solid var(--tone-accent); outline-offset:3px; }
@media(max-width:850px) {
  .navin { gap:10px; }
  .appearance-shell { margin-left:auto; }
  .appearance-toggle { padding:6px 8px; font-size:14px; }
  .links { z-index:25; }
}
@media(max-width:390px) {
  .appearance-value { max-width:87px; text-overflow:ellipsis; overflow:hidden; }
  .navin { gap:6px; }
  .brand { font-size:17px; }
  .brand-mark { width:25px; }
}
@media(prefers-reduced-motion:reduce){
  .appearance-toggle { transition:none; }
  :root[data-solar-animate] { transition:none; }
}
/* Accessible selection: invert the CURRENT effective text/surface colors.
   Do not use the accent color as a selection background on night/twilight.
   These inherited tokens keep selection readable in dark sections as well. */
:root[data-solar-stage] .statement,
:root[data-solar-stage] .footer {
  --selection-bg: var(--tone-on-deep);
  --selection-fg: var(--tone-deep);
}
:root[data-solar-stage] ::selection,
:root[data-solar-stage] *::selection {
  background-color: var(--selection-bg);
  color: var(--selection-fg);
  text-shadow: none;
}
:root[data-solar-stage] ::-moz-selection,
:root[data-solar-stage] *::-moz-selection {
  background-color: var(--selection-bg);
  color: var(--selection-fg);
  text-shadow: none;
}