/* Ascendia — Bright Glass theme tokens (design/01_foundation.md). Light = bright aura; dark = deep-indigo aura. */
:root {
  color-scheme: light dark;
  --bp-bg: #EAF4FF;
  --bp-bg-wash: radial-gradient(80vmax 60vmax at 50% -10%, rgba(120,200,255,.35), transparent 70%);
  --bp-aura-1: rgba(106,182,255,.55);
  --bp-aura-2: rgba(116,226,246,.45);
  --bp-aura-3: rgba(190,225,255,.55);
  --bp-paper: rgba(255,255,255,.92);
  --bp-paper-2: #EAF2FD;
  --bp-line: rgba(30,80,160,.12);
  --bp-line-strong: #6B84AD;
  --bp-on-primary: #FFFFFF;
  --bp-dots: radial-gradient(rgba(30,100,190,.10) 1px, transparent 1.5px) 0 0/22px 22px;
  --bp-lite: rgba(255,255,255,.70);
  --bp-lite-line: rgba(255,255,255,.75);
  --bp-glass2: rgba(255,255,255,.62);
  --bp-glass3: rgba(255,255,255,.55);
  --bp-glass-menu: rgba(255,255,255,.88);
  --bp-glass-line: rgba(255,255,255,.75);
  --bp-spec: inset 0 1px 0 rgba(255,255,255,.9);
  --bp-sat: 160%;
  --bp-gloss: linear-gradient(180deg, rgba(255,255,255,.35), transparent 45%);
  --bp-glass-solid: #F7FBFF;
  --bp-track: #D3E5FA;
  --bp-field: #FFFFFF;
  --bp-ink: #10233F;
  --bp-ink-2: #3A4A6B;
  --bp-ink-3: #4F5F80;
  --bp-tint: #1A66D9;
  --bp-tint-ink: #1749A8;
  --bp-tint-soft: #E1EEFF;
  --bp-primary: linear-gradient(135deg,#2272E6,#1A66D9);
  --bp-focus: #1A66D9;
  --bp-field-line: #6B84AD;
  --bp-pos: #1A6E43;
  --bp-pos-soft: #E3F4EA;
  --bp-neg: #B42318;
  --bp-neg-soft: #FCE9E7;
  --bp-warn: #8F5200;
  --bp-warn-soft: #FCF0DC;
  --bp-info: #1749A8;
  --bp-info-soft: #E1EEFF;
  --bp-neu: #3A4A6B;
  --bp-neu-soft: #EAF2FD;
  --bp-shadow-1: 0 1px 2px rgba(20,70,160,.06), 0 10px 30px -14px rgba(20,70,160,.22);
  --bp-shadow-2: 0 2px 6px rgba(20,70,160,.07), 0 24px 48px -20px rgba(20,70,160,.30);
  --bp-glow: 0 10px 24px -10px rgba(26,102,217,.55);
  --lg-separator: rgba(30,80,160,.14);
  --lg-bg: var(--bp-bg); --lg-bg-elevated: var(--bp-paper); --lg-surface-grouped: var(--bp-paper-2);
  --lg-text: var(--bp-ink); --lg-text-secondary: var(--bp-ink-2); --lg-text-tertiary: var(--bp-ink-3);
  --lg-tint: var(--bp-tint); --lg-tint-ink: var(--bp-tint-ink); --lg-tint-soft: var(--bp-tint-soft); --lg-tint-fill: #1A66D9; --lg-on-tint: var(--bp-on-primary);
  --lg-positive: var(--bp-pos); --lg-positive-soft: var(--bp-pos-soft); --lg-negative: var(--bp-neg); --lg-negative-soft: var(--bp-neg-soft);
  --lg-warning: var(--bp-warn); --lg-warning-soft: var(--bp-warn-soft); --lg-fill: var(--bp-neu-soft); --lg-fill-strong: var(--bp-track);
  --bp-r-card: 28px; --bp-r-tile: 24px; --bp-r-inner: 18px; --bp-r-badge: 16px;
  --bp-ease: cubic-bezier(.2,.8,.2,1); --bp-spring: cubic-bezier(.34,1.4,.64,1);
  --bp-t-press: 120ms; --bp-t-hover: 180ms; --bp-t-enter: 240ms; --bp-t-pop: 360ms;
  --math: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
@media (prefers-color-scheme: dark) {
 :root:not([data-theme="light"]) {
  --bp-bg: #0B1626;
  --bp-bg-wash: radial-gradient(80vmax 60vmax at 50% -10%, rgba(40,120,220,.25), transparent 70%);
  --bp-aura-1: rgba(40,110,210,.45);
  --bp-aura-2: rgba(20,130,160,.35);
  --bp-aura-3: rgba(30,70,140,.40);
  --bp-paper: rgba(16,28,48,.92);
  --bp-paper-2: #16273F;
  --bp-line: rgba(150,200,255,.14);
  --bp-line-strong: #5F7898;
  --bp-on-primary: #15132B;
  --bp-dots: radial-gradient(rgba(180,215,255,.06) 1px, transparent 1.5px) 0 0/22px 22px;
  --bp-lite: rgba(20,34,56,.62);
  --bp-lite-line: rgba(150,200,255,.16);
  --bp-glass2: rgba(18,32,54,.62);
  --bp-glass3: rgba(14,26,46,.60);
  --bp-glass-menu: rgba(16,28,48,.90);
  --bp-glass-line: rgba(150,200,255,.16);
  --bp-spec: inset 0 1px 0 rgba(255,255,255,.10);
  --bp-sat: 160%;
  --bp-gloss: linear-gradient(180deg, rgba(255,255,255,.06), transparent 45%);
  --bp-glass-solid: #101C30;
  --bp-track: #1E3350;
  --bp-field: #0D192B;
  --bp-ink: #E8F1FF;
  --bp-ink-2: #BCCDE6;
  --bp-ink-3: #9DB1CF;
  --bp-tint: #8CC8FF;
  --bp-tint-ink: #B5DBFF;
  --bp-tint-soft: #17304F;
  --bp-primary: linear-gradient(135deg,#9CD0FF,#6FB6FF);
  --bp-focus: #8CC8FF;
  --bp-field-line: #5F7898;
  --bp-pos: #6FD39C;
  --bp-pos-soft: #173326;
  --bp-neg: #FF8F86;
  --bp-neg-soft: #3A2028;
  --bp-warn: #F4BD6A;
  --bp-warn-soft: #372C1A;
  --bp-info: #B5DBFF;
  --bp-info-soft: #17304F;
  --bp-neu: #BCCDE6;
  --bp-neu-soft: #16273F;
  --bp-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.6);
  --bp-shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,0,0,.65);
  --bp-glow: 0 10px 24px -10px rgba(111,182,255,.40);
  --lg-separator: rgba(150,200,255,.16);
  color-scheme: dark;
  --lg-bg: var(--bp-bg); --lg-bg-elevated: var(--bp-paper); --lg-surface-grouped: var(--bp-paper-2);
  --lg-text: var(--bp-ink); --lg-text-secondary: var(--bp-ink-2); --lg-text-tertiary: var(--bp-ink-3);
  --lg-tint: var(--bp-tint); --lg-tint-ink: var(--bp-tint-ink); --lg-tint-soft: var(--bp-tint-soft); --lg-tint-fill: #8CC8FF; --lg-on-tint: var(--bp-on-primary);
  --lg-positive: var(--bp-pos); --lg-positive-soft: var(--bp-pos-soft); --lg-negative: var(--bp-neg); --lg-negative-soft: var(--bp-neg-soft);
  --lg-warning: var(--bp-warn); --lg-warning-soft: var(--bp-warn-soft); --lg-fill: var(--bp-neu-soft); --lg-fill-strong: var(--bp-track);
 }
}
:root[data-theme="dark"] {
  --lg-bg: var(--bp-bg); --lg-bg-elevated: var(--bp-paper); --lg-surface-grouped: var(--bp-paper-2);
  --lg-text: var(--bp-ink); --lg-text-secondary: var(--bp-ink-2); --lg-text-tertiary: var(--bp-ink-3);
  --lg-tint: var(--bp-tint); --lg-tint-ink: var(--bp-tint-ink); --lg-tint-soft: var(--bp-tint-soft); --lg-tint-fill: #8CC8FF; --lg-on-tint: var(--bp-on-primary);
  --lg-positive: var(--bp-pos); --lg-positive-soft: var(--bp-pos-soft); --lg-negative: var(--bp-neg); --lg-negative-soft: var(--bp-neg-soft);
  --lg-warning: var(--bp-warn); --lg-warning-soft: var(--bp-warn-soft); --lg-fill: var(--bp-neu-soft); --lg-fill-strong: var(--bp-track);
  --bp-bg: #0B1626;
  --bp-bg-wash: radial-gradient(80vmax 60vmax at 50% -10%, rgba(40,120,220,.25), transparent 70%);
  --bp-aura-1: rgba(40,110,210,.45);
  --bp-aura-2: rgba(20,130,160,.35);
  --bp-aura-3: rgba(30,70,140,.40);
  --bp-paper: rgba(16,28,48,.92);
  --bp-paper-2: #16273F;
  --bp-line: rgba(150,200,255,.14);
  --bp-line-strong: #5F7898;
  --bp-on-primary: #15132B;
  --bp-dots: radial-gradient(rgba(180,215,255,.06) 1px, transparent 1.5px) 0 0/22px 22px;
  --bp-lite: rgba(20,34,56,.62);
  --bp-lite-line: rgba(150,200,255,.16);
  --bp-glass2: rgba(18,32,54,.62);
  --bp-glass3: rgba(14,26,46,.60);
  --bp-glass-menu: rgba(16,28,48,.90);
  --bp-glass-line: rgba(150,200,255,.16);
  --bp-spec: inset 0 1px 0 rgba(255,255,255,.10);
  --bp-sat: 160%;
  --bp-gloss: linear-gradient(180deg, rgba(255,255,255,.06), transparent 45%);
  --bp-glass-solid: #101C30;
  --bp-track: #1E3350;
  --bp-field: #0D192B;
  --bp-ink: #E8F1FF;
  --bp-ink-2: #BCCDE6;
  --bp-ink-3: #9DB1CF;
  --bp-tint: #8CC8FF;
  --bp-tint-ink: #B5DBFF;
  --bp-tint-soft: #17304F;
  --bp-primary: linear-gradient(135deg,#9CD0FF,#6FB6FF);
  --bp-focus: #8CC8FF;
  --bp-field-line: #5F7898;
  --bp-pos: #6FD39C;
  --bp-pos-soft: #173326;
  --bp-neg: #FF8F86;
  --bp-neg-soft: #3A2028;
  --bp-warn: #F4BD6A;
  --bp-warn-soft: #372C1A;
  --bp-info: #B5DBFF;
  --bp-info-soft: #17304F;
  --bp-neu: #BCCDE6;
  --bp-neu-soft: #16273F;
  --bp-shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.6);
  --bp-shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 24px 48px -20px rgba(0,0,0,.65);
  --bp-glow: 0 10px 24px -10px rgba(111,182,255,.40);
  --lg-separator: rgba(150,200,255,.16);
  color-scheme: dark;
}
/* contrast sweep 22/10: the games, the city and the Decorate panel are drawn on LIGHT paper / glass art in every theme. With the device in dark mode their
   text inherited the dark-theme ink (#E8F1FF: near-white text on cream / sky panels). These surfaces always take the light tokens. */
:root[data-theme="light"], body.in-game, .dc-dlg, .at, .at-reveal, .at-sheet, .pl-root, .f3-frame, .arc-page, .lt-force {
  --lg-bg: var(--bp-bg); --lg-bg-elevated: var(--bp-paper); --lg-surface-grouped: var(--bp-paper-2);
  --lg-text: var(--bp-ink); --lg-text-secondary: var(--bp-ink-2); --lg-text-tertiary: var(--bp-ink-3);
  --lg-tint: var(--bp-tint); --lg-tint-ink: var(--bp-tint-ink); --lg-tint-soft: var(--bp-tint-soft); --lg-tint-fill: #1A66D9; --lg-on-tint: var(--bp-on-primary);
  --lg-positive: var(--bp-pos); --lg-positive-soft: var(--bp-pos-soft); --lg-negative: var(--bp-neg); --lg-negative-soft: var(--bp-neg-soft);
  --lg-warning: var(--bp-warn); --lg-warning-soft: var(--bp-warn-soft); --lg-fill: var(--bp-neu-soft); --lg-fill-strong: var(--bp-track);
  --bp-bg: #EAF4FF;
  --bp-bg-wash: radial-gradient(80vmax 60vmax at 50% -10%, rgba(120,200,255,.35), transparent 70%);
  --bp-aura-1: rgba(106,182,255,.55);
  --bp-aura-2: rgba(116,226,246,.45);
  --bp-aura-3: rgba(190,225,255,.55);
  --bp-paper: rgba(255,255,255,.92);
  --bp-paper-2: #EAF2FD;
  --bp-line: rgba(30,80,160,.12);
  --bp-line-strong: #6B84AD;
  --bp-on-primary: #FFFFFF;
  --bp-dots: radial-gradient(rgba(30,100,190,.10) 1px, transparent 1.5px) 0 0/22px 22px;
  --bp-lite: rgba(255,255,255,.70);
  --bp-lite-line: rgba(255,255,255,.75);
  --bp-glass2: rgba(255,255,255,.62);
  --bp-glass3: rgba(255,255,255,.55);
  --bp-glass-menu: rgba(255,255,255,.88);
  --bp-glass-line: rgba(255,255,255,.75);
  --bp-spec: inset 0 1px 0 rgba(255,255,255,.9);
  --bp-sat: 160%;
  --bp-gloss: linear-gradient(180deg, rgba(255,255,255,.35), transparent 45%);
  --bp-glass-solid: #F7FBFF;
  --bp-track: #D3E5FA;
  --bp-field: #FFFFFF;
  --bp-ink: #10233F;
  --bp-ink-2: #3A4A6B;
  --bp-ink-3: #4F5F80;
  --bp-tint: #1A66D9;
  --bp-tint-ink: #1749A8;
  --bp-tint-soft: #E1EEFF;
  --bp-primary: linear-gradient(135deg,#2272E6,#1A66D9);
  --bp-focus: #1A66D9;
  --bp-field-line: #6B84AD;
  --bp-pos: #1A6E43;
  --bp-pos-soft: #E3F4EA;
  --bp-neg: #B42318;
  --bp-neg-soft: #FCE9E7;
  --bp-warn: #8F5200;
  --bp-warn-soft: #FCF0DC;
  --bp-info: #1749A8;
  --bp-info-soft: #E1EEFF;
  --bp-neu: #3A4A6B;
  --bp-neu-soft: #EAF2FD;
  --bp-shadow-1: 0 1px 2px rgba(20,70,160,.06), 0 10px 30px -14px rgba(20,70,160,.22);
  --bp-shadow-2: 0 2px 6px rgba(20,70,160,.07), 0 24px 48px -20px rgba(20,70,160,.30);
  --bp-glow: 0 10px 24px -10px rgba(26,102,217,.55);
  --lg-separator: rgba(30,80,160,.14);
  color-scheme: light;
}

/* ---- surfaces ---- */
html, body { background-color: var(--bp-bg); }
body { background-image: var(--bp-bg-wash); color: var(--bp-ink); }
.paper { background: var(--bp-paper); border: 1px solid var(--bp-line); border-radius: var(--bp-r-card); box-shadow: var(--bp-shadow-1); }
.lite { background: var(--bp-lite); border: 1px solid var(--bp-lite-line); box-shadow: var(--bp-spec), var(--bp-shadow-1); }
.glass2, .glass3 { position: relative; isolation: isolate; border: 1px solid var(--bp-glass-line); box-shadow: var(--bp-spec), var(--bp-shadow-2); }
.glass2 { background: var(--bp-glass2); -webkit-backdrop-filter: blur(12px) saturate(var(--bp-sat)); backdrop-filter: blur(12px) saturate(var(--bp-sat)); }
.glass3 { background: var(--bp-glass3); -webkit-backdrop-filter: blur(14px) saturate(var(--bp-sat)); backdrop-filter: blur(14px) saturate(var(--bp-sat)); }
.glass2::before, .glass3::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: var(--bp-gloss); }
.menu.glass3, dialog.sheet.glass3 { background: var(--bp-glass-menu); }

/* ---- aura (3 big soft blobs; transform-only motion; still except on home/login) ---- */
.aura { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.aura i { position: absolute; display: block; border-radius: 50%; will-change: transform; animation-play-state: paused; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; }
.aura .a1 { width: 72vmax; height: 72vmax; left: -18vmax; top: -22vmax; background: radial-gradient(closest-side, var(--bp-aura-1), transparent); animation-name: bp-drift-1; animation-duration: 32s; }
.aura .a2 { width: 60vmax; height: 60vmax; right: -20vmax; top: 8vh; background: radial-gradient(closest-side, var(--bp-aura-2), transparent); animation-name: bp-drift-2; animation-duration: 38s; animation-delay: -12s; }
.aura .a3 { width: 70vmax; height: 70vmax; left: 30vw; bottom: -30vmax; background: radial-gradient(closest-side, var(--bp-aura-3), transparent); animation-name: bp-drift-3; animation-duration: 44s; animation-delay: -20s; }
body[data-screen="home"] .aura i, body[data-screen="login"] .aura i, body[data-screen="setup"] .aura i { animation-play-state: running; }
@keyframes bp-drift-1 { to { transform: translate(8vmax, 6vmax) scale(1.08); } }
@keyframes bp-drift-2 { to { transform: translate(-6vmax, 10vmax) scale(1.12); } }
@keyframes bp-drift-3 { to { transform: translate(-10vmax, -6vmax) scale(1.05); } }