/* Celestial Aether — base element styles. Consumes semantic tokens only. */

/* Shared base: normal, scrollable document flow (the default for the website + any consumer).
   The launcher opts into a fixed, no-scroll chromeless shell in its own launcher.css. */
html, body{margin:0}
body{background:var(--color-bg); color:var(--text-primary); font-family:var(--font-ui); font-size:var(--text-md)}
a{color:var(--color-accent-2); text-decoration:none}
.eyebrow{font:500 var(--text-xs)/1 var(--font-ui); letter-spacing:.26em; text-transform:uppercase; color:var(--color-accent)}
.wordmark{font-family:var(--font-display); font-weight:600; letter-spacing:.14em; text-transform:uppercase; text-wrap:balance}
.glass{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.5), var(--edge-highlight)}

/* .app-btn as a plain, global utility class (mirrors AppButton.razor.css's scoped rules) so it can
   style plain <a> CTA links, which CSS isolation's scope attribute can't reach — AppButton.razor
   itself still renders correctly since these rules are additive/identical, not a replacement. */
.app-btn{display:inline-block; border:0; cursor:pointer; border-radius:var(--radius-md); padding:var(--space-3) var(--space-6);
  font:600 var(--text-md)/1 var(--font-ui); text-decoration:none; transition:transform var(--motion-fast), box-shadow var(--motion-fast)}
.app-btn.primary{background:var(--color-accent); color:var(--color-accent-ink);
  box-shadow:var(--glow-accent), inset 0 1px 0 rgba(255,255,255,.4)}
.app-btn.primary:hover{transform:translateY(-2px)}
.app-btn.ghost{background:transparent; color:var(--text-secondary); border:1px solid var(--color-border); font-weight:500}
.app-btn.ghost:hover{color:var(--text-primary); border-color:var(--color-border-strong)}
.app-btn:focus-visible{outline:2px solid var(--text-primary); outline-offset:3px}
.app-btn:disabled{opacity:.5; cursor:default; transform:none}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important }
}

/* Thin, glass-toned WebView scrollbar for any element that opts back into overflow:auto/scroll. */
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--color-border-strong); border-radius:var(--radius-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--color-border)}