/* ============================================================
   Mirage Design System — Colors & Type
   Source of truth: mirage-client/public/assets/mirage-tokens.css
   ============================================================ */

/* ---------- THEME: LIGHT (calm graphite, Notion-inspired) ----------
   Тёплые off-whites вместо холодных blue-greys; графит вместо чёрного;
   единый монохром с приглушённым accent — без saturated indigo. */
:root,
[data-theme="light"] {
  /* Surfaces — тёплые off-whites, минимум blue-tint */
  --c-bg-app:           #f7f7f5;            /* тёплый off-white app bg */
  --c-bg-header:        #ffffff;            /* белый header (не цветной) — Notion-style */
  --c-bg-header-border: #e7e5e4;            /* тонкая warm-grey разделительная */
  --c-bg-panel:         #ffffff;            /* настоящий белый для панелей/карточек */
  --c-bg-contacts:      #ffffff;
  --c-bg-input:         #f1f1ef;            /* тёплый input fill */
  --c-bg-chat:          #fafaf9;            /* почти-белый, едва-warm — calm reading area */

  /* Message bubbles — графит вместо чёрного для мягкого контраста */
  --c-bg-msg-me:        #3f3f46;            /* zinc-700 — soft charcoal, не black */
  --c-text-msg-me:      #fafafa;
  --c-text-msg-me-time: #d4d4d8;            /* zinc-300 */
  --c-bg-msg-other:     #ffffff;
  --c-text-msg-other:   #3f3f46;
  --c-border-msg-other: #e7e5e4;

  /* Foreground — soft graphite scale (zinc), без blue-tint slate */
  --c-text-header:      #3f3f46;            /* теперь dark text на белом header */
  --c-text-primary:     #3f3f46;            /* zinc-700 — soft charcoal */
  --c-text-secondary:   #71717a;            /* zinc-500 */
  --c-text-muted:       #a1a1aa;            /* zinc-400 */

  /* Lines — warm subtle */
  --c-border:           #e7e5e4;            /* stone-200, тёплый */
  --c-bg-popup:         #ffffff;            /* solid: native select popups ignore alpha */
  --c-text-popup:       #3f3f46;
  --c-popup-scheme:     light;
  /* Floating surfaces drawn by the app (menus, tooltips, the contact slide-over); glass frosts them. */
  --c-bg-float:         #ffffff;
  --c-bg-float-strong:  #ffffff;
  --c-border-float:     #e7e5e4;
  --backdrop-float:     none;

  /* Accent family — monochrome graphite (унификация с текстом) */
  --c-accent:           #3f3f46;            /* zinc-700 — accent = ink */
  --c-accent-hover:     #52525b;            /* zinc-600 */
  --c-accent-light:     #f4f4f5;            /* zinc-100 — soft surface tint */
  --c-accent-soft:      #e4e4e7;            /* zinc-200 — pill/badge surface */

  /* Overlays / chrome */
  --c-overlay-bg:       #ffffff;
  --c-scrim:            rgba(15, 23, 42, 0.40);   /* dimmed page behind a dialog */
  --c-settings-icon:    #71717a;            /* zinc-500 — приглушённый, не saturated */
  --c-scrollbar:        #d4d4d8;            /* zinc-300 */
  --c-btn-secondary:        #52525b;
  --c-btn-secondary-hover:  #71717a;
  --c-contact-hover:    #f5f5f4;            /* stone-100 — едва-видный hover */
  --c-contact-active:   #e7e5e4;            /* stone-200 — отчётливее active */
  --c-contact-border:   #3f3f46;            /* match accent */
  --c-system-msg:       rgba(0,0,0,0.04);   /* субтильнее предыдущих 0.1 */

  /* Chrome hover — для кнопок поверх header'а; theme-adaptive */
  --c-chrome-hover:     rgba(0,0,0,0.06);   /* soft grey на белом header */
  --c-text-on-accent:   #ffffff;
}

/* ---------- THEME: DARK (calm) ---------- */
[data-theme="dark"] {
  --c-bg-app:           #111624;
  --c-bg-header:        #151b2b;
  --c-bg-header-border: rgba(127,159,179,0.18);
  --c-text-header:      #c8d4df;
  --c-bg-panel:         #111624;
  --c-bg-contacts:      #141a28;
  --c-bg-input:         #1a2130;
  --c-bg-chat:          #0e1320;

  --c-bg-msg-me:        #334a5c;
  --c-text-msg-me:      #e6edf3;
  --c-text-msg-me-time: #9fb3c2;
  --c-bg-msg-other:     #1a2130;
  --c-text-msg-other:   #c8d4df;
  --c-border-msg-other: #242c3c;

  --c-text-primary:     #c8d4df;
  --c-text-secondary:   #8a97a8;
  --c-text-muted:       #5c6776;
  --c-border:           #242c3c;
  --c-bg-popup:         #1a2130;
  --c-text-popup:       #c8d4df;
  --c-popup-scheme:     dark;
  --c-bg-float:         #1a2130;
  --c-bg-float-strong:  #1a2130;
  --c-border-float:     #242c3c;
  --backdrop-float:     none;

  --c-accent:           #6b9aaa;
  --c-accent-hover:     #7fadbd;
  --c-accent-light:     rgba(107,154,170,0.08);
  --c-accent-soft:      rgba(107,154,170,0.15);

  --c-overlay-bg:       #111624;
  --c-scrim:            rgba(0, 0, 0, 0.55);   /* dimmed page behind a dialog */
  --c-settings-icon:    #7fadbd;
  --c-scrollbar:        #242c3c;
  --c-btn-secondary:        #1a2130;
  --c-btn-secondary-hover:  #242c3c;
  --c-contact-hover:    rgba(127,159,179,0.04);
  --c-contact-active:   rgba(107,154,170,0.10);
  --c-contact-border:   #6b9aaa;
  --c-system-msg:       rgba(255,255,255,0.04);
  --c-chrome-hover:     rgba(255,255,255,0.08);
  --c-text-on-accent:   #0e1320;
}

/* ---------- THEME: GLASS (Liquid Glass — Apple Tahoe-inspired) ----------
   Heavy blur + saturate, specular edges, depth shadows. Vibrant violet/cyan/
   magenta aurora background bleeds through the glass. */
[data-theme="glass"] {
  /* Surfaces — повышенная прозрачность; компенсируется тяжёлым blur'ом */
  --c-bg-app:           rgba(255,255,255,0.04);
  --c-bg-header:        rgba(20,12,40,0.50);
  --c-bg-header-border: rgba(255,255,255,0.10);
  --c-text-header:      #ffffff;
  --c-bg-panel:         rgba(255,255,255,0.07);
  --c-bg-contacts:      rgba(255,255,255,0.05);
  --c-bg-input:         rgba(255,255,255,0.10);
  --c-bg-chat:          rgba(255,255,255,0.02);

  /* Message bubbles */
  --c-bg-msg-me:        rgba(139,92,246,0.62);
  --c-text-msg-me:      #ffffff;
  --c-text-msg-me-time: #c4b5fd;
  --c-bg-msg-other:     rgba(255,255,255,0.09);
  --c-text-msg-other:   #f1f5f9;
  --c-border-msg-other: rgba(255,255,255,0.12);

  /* Foreground */
  --c-text-primary:     #f1f5f9;
  --c-text-secondary:   #cbd5e1;
  --c-text-muted:       #94a3b8;
  --c-border:           rgba(255,255,255,0.10);
  --c-bg-popup:         #1a1f2e;
  --c-text-popup:       #f1f5f9;
  --c-popup-scheme:     dark;
  /* Tint opacity keeps light text at 4.5:1 or more even over a white backdrop. */
  --c-bg-float:         rgba(30, 22, 60, 0.72);
  --c-bg-float-strong:  rgba(30, 22, 60, 0.84);
  --c-border-float:     rgba(255, 255, 255, 0.12);
  --backdrop-float:     blur(20px) saturate(140%);

  /* Accent */
  --c-accent:           #a78bfa;
  --c-accent-hover:     #c4b5fd;
  --c-accent-light:     rgba(167,139,250,0.14);
  --c-accent-soft:      rgba(167,139,250,0.24);

  /* Chrome */
  --c-overlay-bg:       rgba(15,12,40,0.82);
  --c-scrim:            rgba(5, 7, 15, 0.55);   /* dimmed page behind a dialog */
  --c-settings-icon:    #a78bfa;
  --c-scrollbar:        rgba(255,255,255,0.15);
  --c-btn-secondary:        rgba(255,255,255,0.12);
  --c-btn-secondary-hover:  rgba(255,255,255,0.20);
  --c-contact-hover:    rgba(255,255,255,0.05);
  --c-contact-active:   rgba(167,139,250,0.18);
  --c-contact-border:   #a78bfa;
  --c-system-msg:       rgba(255,255,255,0.06);
  --c-chrome-hover:     rgba(255,255,255,0.12);
  --c-text-on-accent:   #1a0533;

  /* === Liquid Glass primitives === */
  /* Blur levels — снижены с прошлых значений (26/38) после
     нагрузочного теста: 20px medium даёт визуально неотличимый
     результат при ~30% меньшей загрузке compositor'a. Heavy остаётся
     для "premium feel" mode. */
  --c-glass-blur-light:    10px;
  --c-glass-blur-medium:   20px;
  --c-glass-blur-heavy:    32px;
  /* Saturate — снижены с 130/170/200%. Каждые 10% saturate выше 100% =
     дополнительная color-matrix операция в pipeline. Визуально 120-140%
     достаточно для "цвет насыщеннее" feeling без overcost. */
  --c-glass-sat-light:     115%;
  --c-glass-sat-medium:    130%;
  --c-glass-sat-heavy:     150%;
  /* Активные значения (default = medium). Перепишутся через JS из настроек. */
  --c-glass-blur:          var(--c-glass-blur-medium);
  --c-glass-saturate:      var(--c-glass-sat-medium);
  /* Specular edges + depth */
  --c-glass-edge-top:      rgba(255,255,255,0.22);
  --c-glass-edge-bot:      rgba(0,0,0,0.10);
  --c-glass-shadow:        0 16px 48px rgba(0,0,0,0.38);
}

/* Glass background gradient (applied to the app-container, not document body).
   Cross-theme constants — namespace-stable брендовые насыщенные тона. */
:root {
  --c-glass-grad-1: #1a0533;
  --c-glass-grad-2: #0f0a2e;
  --c-glass-grad-3: #0a192f;
}
.mirage-glass-bg {
  background: linear-gradient(135deg, var(--c-glass-grad-1) 0%, var(--c-glass-grad-2) 50%, var(--c-glass-grad-3) 100%);
}

/* ============================================================
   SEMANTIC STATUS COLORS (cross-theme)
   ============================================================ */
:root {
  /* Dots & pills — saturated brand-signal hues. Kept separate from the
     unified -solid/-bg/-border palette below because the "online" dot is
     deliberately a brighter green than the success surface fill. */
  --c-status-online:     #4ade80;   /* online dot, slightly brighter than -ok-solid */
  --c-status-away:       #9ca3af;   /* offline dot, muted */
  --c-status-offline:    #6b7280;   /* offline/disconnected — slate */
  /* The following four legacy tokens are kept as aliases so existing callers
     keep working. New code should use the unified -solid / -text tokens. */
  --c-status-good:       var(--c-status-online);              /* alias for direct/P2P relay pill */
  --c-status-idle:       var(--c-status-warn-solid);          /* idle/away amber */
  --c-status-dnd:        var(--c-status-error-solid);         /* do-not-disturb red */
  --c-status-warn:       var(--c-status-warn-solid);
  --c-status-error:      var(--c-status-error-solid);
  --c-status-warn-soft:  rgba(245,158,11,0.9);                /* solid reconnect-banner bg */
  --c-status-error-h:    #dc2626;                              /* hover for solid danger button — red-600 */
  --c-status-error-soft: var(--c-status-error-solid);
  --c-status-online-bg:  var(--c-status-ok-solid);            /* solid success button (call accept) */
  --c-status-online-h:   #16a34a;                              /* green-600 — hover for solid success button */

  /* ============================================================
     UNIFIED STATUS PALETTE — one canonical hue per semantic role.
     ============================================================
     Goal: stop sprawling across #b04444 / #3aa05a / amber-300 / amber-400 /
     bg-X-500/10 / bg-X-500/20 / bg-X-500/25 / etc. across the codebase.
     Every warning surface uses amber-500; every error surface uses red-500;
     every success surface uses green-500 — at FIXED alpha values for the
     tinted bg (/15) and border (/30). Text picks up the theme-aware
     -text / -strong tokens below.

     If you find yourself reaching for a new hex code, use one of these. */

  /* Base solids (don't override per theme — these are the brand-signal hues) */
  --c-status-ok-solid:    #22c55e;  /* green-500  */
  --c-status-warn-solid:  #f59e0b;  /* amber-500  */
  --c-status-error-solid: #ef4444;  /* red-500    */

  /* Tinted panel fills (rgba) — same hue as -solid at 15% alpha */
  --c-status-ok-bg:       rgba(34,  197,  94, 0.15);
  --c-status-warn-bg:     rgba(245, 158,  11, 0.15);
  --c-status-error-bg:    rgba(239,  68,  68, 0.15);

  /* Borders for tinted panels — same hue at 30% alpha */
  --c-status-ok-border:    rgba(34,  197,  94, 0.30);
  --c-status-warn-border:  rgba(245, 158,  11, 0.30);
  --c-status-error-border: rgba(239,  68,  68, 0.30);

  /* Text tokens for the tinted panels — theme-aware via the [data-theme]
     overrides below. Light theme = dark tinted hues (readable on white),
     dark/glass = near-white tinted hues (readable on dark). */
  --c-status-ok-text:    #166534;   /* green-800   — readable on white card */
  --c-status-warn-text:  #854d0e;   /* yellow-800  — readable on white card */
  --c-status-error-text: #991b1b;   /* red-800     — readable on white card */
  --c-status-ok-strong:    #14532d; /* green-900   — heading inside ok panel  */
  --c-status-warn-strong:  #713f12; /* yellow-900  — heading inside warn panel */
  --c-status-error-strong: #7f1d1d; /* red-900     — heading inside error panel */
  --c-status-video:      #0ea5e9;   /* sky-500, video-call button */
  --c-status-video-h:    #0284c7;   /* hover for video button */

  /* Call window backgrounds — фон для voice/video окон (theme-independent) */
  --c-bg-call:           #05070f;   /* основной фон call-window */
  --c-bg-call-deep:      #060a16;   /* glass top-bar bg / voice radial bg base */
  --c-bg-tile:           #1a1a1a;   /* peer video tile placeholder */
}

/* ============================================================
   MESSAGE BUBBLE SUPPLEMENTARY (v3 breaking-change addition)
   --c-text-msg-other-secondary — для timestamp/checkmarks внутри
   чужих бабблов (v3 namespace, ранее использовался --c-text-muted)
   ============================================================ */
:root,
[data-theme="light"]   { --c-text-msg-other-secondary: #94a3b8; }
[data-theme="dark"]    { --c-text-msg-other-secondary: #6b7689; }
[data-theme="glass"]   { --c-text-msg-other-secondary: rgba(255,255,255,0.5); }

/* The QR and its card stay dark on a light plate in every theme so any scanner reads them;
   only the finder eyes take a darkened accent of the theme. */
:root,
[data-theme="light"]   { --c-qr-plate: #ffffff; --c-qr-ink: #18181b; --c-qr-ink-secondary: #52525b; --c-qr-eye: #3f3f46; }
[data-theme="dark"]    { --c-qr-plate: #ffffff; --c-qr-ink: #18181b; --c-qr-ink-secondary: #52525b; --c-qr-eye: #2f5f6e; }
[data-theme="glass"]   { --c-qr-plate: #ffffff; --c-qr-ink: #18181b; --c-qr-ink-secondary: #52525b; --c-qr-eye: #6d28d9; }
/* The card the scene QR sits on: its colour is what the art fades into, and its text reads at 4.5:1 or better. */
[data-theme="light"]   { --c-qr-card: #ffffff; --c-qr-card-ink: #18181b; --c-qr-card-ink-secondary: #52525b; }
[data-theme="dark"]    { --c-qr-card: #151b2b; --c-qr-card-ink: #e6edf3; --c-qr-card-ink-secondary: #a9b4c2; }
[data-theme="glass"]   { --c-qr-card: #251d3a; --c-qr-card-ink: #f4f0ff; --c-qr-card-ink-secondary: #c9bde6; }

/* The frosted onboarding card over its scene, and the shadow that lifts it off the art. */
:root,
[data-theme="light"]   { --c-onb-card: rgba(255, 255, 255, 0.86); --c-onb-card-border: #e7e5e4; --c-onb-card-shadow: 0 24px 64px rgba(24, 24, 27, 0.10); }
[data-theme="dark"]    { --c-onb-card: rgba(21, 27, 43, 0.82); --c-onb-card-border: #242c3c; --c-onb-card-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); }
[data-theme="glass"]   { --c-onb-card: rgba(255, 255, 255, 0.07); --c-onb-card-border: rgba(255, 255, 255, 0.10); --c-onb-card-shadow: 0 24px 64px rgba(10, 4, 30, 0.45); }

/* A new device's own code on the sign-in screen: a green panel, its ink, and the shimmer of a code on its way. */
:root,
[data-theme="light"]   { --c-signin-new: #e9f6ee; --c-signin-new-border: #bfe3cb; --c-signin-new-ink: #14532d; --c-signin-new-ink-2: #3f6f52; --c-signin-done-ink: #ffffff; --c-signin-shimmer: rgba(255, 255, 255, 0.75); }
[data-theme="dark"]    { --c-signin-new: #13261d; --c-signin-new-border: #24543a; --c-signin-new-ink: #d8f3e2; --c-signin-new-ink-2: #8fc3a3; --c-signin-done-ink: #ffffff; --c-signin-shimmer: rgba(255, 255, 255, 0.12); }
[data-theme="glass"]   { --c-signin-new: rgba(34, 197, 94, 0.12); --c-signin-new-border: rgba(74, 222, 128, 0.30); --c-signin-new-ink: #e7fbef; --c-signin-new-ink-2: #a7e3bf; --c-signin-done-ink: #ffffff; --c-signin-shimmer: rgba(255, 255, 255, 0.14); }

/* What a code is for, told by colour: a cool device-link accent, a green accent for a new device's
   own code, a warm friend accent, and the veil over an expired link. */
:root,
[data-theme="light"]   { --c-qr-device: #1d4ed8; --c-qr-new-device: #047857; --c-qr-friend: #c2410c; --c-qr-veil: #18181b; --c-qr-track: #e4e4e7; }
[data-theme="dark"]    { --c-qr-device: #2563eb; --c-qr-new-device: #059669; --c-qr-friend: #c2410c; --c-qr-veil: #18181b; --c-qr-track: #e4e4e7; }
[data-theme="glass"]   { --c-qr-device: #4f46e5; --c-qr-new-device: #0f766e; --c-qr-friend: #be123c; --c-qr-veil: #18181b; --c-qr-track: #e4e4e7; }

/* Status text tokens (dark + glass overrides) — flips the defaults defined
   above for the light theme to the near-white tinted variants so warning/
   error text reads clearly on a dark/translucent card. */
[data-theme="dark"], [data-theme="glass"] {
  --c-status-ok-text:    #bbf7d0;   /* green-200 */
  --c-status-warn-text:  #fef08a;   /* yellow-200 */
  --c-status-error-text: #fecaca;   /* red-200   */
  --c-status-ok-strong:    #dcfce7; /* green-100 */
  --c-status-warn-strong:  #fef9c3; /* yellow-100 */
  --c-status-error-strong: #fee2e2; /* red-100   */
}

/* ============================================================
   TYPOGRAPHY
   System stack — Mirage uses Tailwind defaults; NO webfonts ship
   with the app. `font-mono` renders hex IDs.
   ============================================================ */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
               Consolas, "Liberation Mono", monospace;

  /* Base scale — compact desktop-companion proportions */
  --fs-micro:    10px;   /* msg-tick, timestamps */
  --fs-xs:       12px;   /* labels, secondary */
  --fs-sm:       14px;   /* body, messages, most buttons */
  --fs-base:     15px;
  --fs-lg:       18px;   /* splash wordmark */
  --fs-xl:       22px;

  --lh-tight:    1.2;
  --lh-normal:   1.45;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-normal:  0;
  --tracking-wide:    0.025em;  /* tailwind tracking-wider */
  --tracking-widest:  0.1em;    /* brand wordmark + caps labels */
}

/* ============================================================
   SEMANTIC TYPE STYLES (mixins-as-classes)
   ============================================================ */

/* Brand wordmark — "MIRAGE" beside shield icon */
.m-wordmark {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Section label above grouped settings (Relay-сервер, Звуки…) */
.m-section-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-text-secondary);
}

/* Screen/dialog titles (small desktop-companion app) */
.m-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--c-text-primary);
  line-height: var(--lh-tight);
}

/* Contact name row */
.m-contact-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--c-text-primary);
}

/* Body / message text */
.m-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-text-primary);
}

/* Secondary label / status under titles */
.m-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
}

/* Muted caption (hint under empty state, placeholders) */
.m-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* Peer ID monospace — `1A2B···C4D5` */
.m-id {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--c-text-primary);
}

/* Micro-label (msg timestamps, tick indicators) */
.m-micro {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  color: var(--c-text-muted);
}

/* Button label */
.m-btn-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
}

/* ============================================================
   RADII, SHADOWS, SPACING TOKENS
   ============================================================ */
:root {
  --r-app:     24px;  /* app-shell only */
  --r-xl:      16px;  /* overlays, large cards */
  --r-lg:      12px;  /* buttons, inputs (default) */
  --r-md:       8px;  /* small icon buttons */
  --r-full:  9999px;

  /* Signature bubble corners */
  --r-bubble-me:    18px 18px 4px 18px;
  --r-bubble-other: 18px 18px 18px 4px;

  --shadow-sm:   0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.1),
                 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-2xl:  0 25px 50px -12px rgba(0,0,0,0.25);

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;

  --dur-fast:    120ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
  --ease-std:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* Standalone windows (unlock, restore, phrase, patch notes, notifications) set
   data-window on <html>. A transparent window has no aurora behind it, so glass
   needs a near-opaque panel; shadows fit the 48 px gutter of the smallest one. */
[data-window] {
  --shadow-card:     0 16px 32px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.08);
  --backdrop-card:   none;
  --notif-bg:        var(--c-bg-popup);
  --notif-border:    rgba(0, 0, 0, 0.08);
  --notif-shadow:    0 4px 12px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
  --notif-backdrop:  none;
}
[data-theme="dark"][data-window] {
  --shadow-card:     0 16px 32px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
  --notif-border:    rgba(255, 255, 255, 0.06);
  --notif-shadow:    0 6px 14px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
}
[data-theme="glass"][data-window] {
  --c-bg-panel:      rgba(20, 12, 40, 0.94);
  --c-bg-app:        rgba(15, 12, 40, 0.96);
  --c-border:        rgba(255, 255, 255, 0.16);
  --c-bg-input:      rgba(255, 255, 255, 0.08);
  --shadow-card:     0 16px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --backdrop-card:   blur(40px) saturate(160%);
  --notif-bg:        rgba(20, 12, 40, 0.72);
  --notif-border:    rgba(255, 255, 255, 0.18);
  --notif-shadow:    0 8px 18px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --notif-backdrop:  blur(28px) saturate(140%);
}

/* The onboarding scene: dawn for light, night for dark, aurora for glass, by data-theme from the first paint. */
.onboarding-scene {
    --scene-sky: linear-gradient(180deg, #c7d3ea 0%, #e3dbe9 34%, #f6e2da 58%, #fbeadb 72%);
    --scene-glow: rgba(255, 214, 170, 0.75);
    --scene-disc: #fff7ea;
    --scene-cw: 1280;
    --scene-ch: 720;
    --scene-ux: 0.72;
    --scene-uy: 0.4;
    --scene-ur: 0.07;
    --scene-wr: max(100cqw, 100cqh * var(--scene-cw) / var(--scene-ch));
    --scene-hr: max(100cqh, 100cqw * var(--scene-ch) / var(--scene-cw));
    --scene-x: calc(50cqw + (var(--scene-ux) - 0.5) * var(--scene-wr));
    --scene-y: calc(50cqh + (var(--scene-uy) - 0.5) * var(--scene-hr));
    --scene-r: calc(var(--scene-ur) * 0.8 * max(var(--scene-wr), var(--scene-hr)));
    --scene-dune-1: hsl(24, 42%, 88%);
    --scene-dune-2: hsl(29, 42%, 82%);
    --scene-dune-3: hsl(34, 42%, 76%);
    --scene-dune-4: hsl(39, 42%, 70%);
    --scene-haze: rgba(255, 255, 255, 0.35);
    --scene-veil: radial-gradient(ellipse at 50% 55%, rgba(247, 247, 245, 0.35) 0%, rgba(247, 247, 245, 0) 70%);
    --scene-stars: 0;
    --scene-ribbons: 0;
    --scene-star: #ffffff;
    --scene-ribbon-a: #5eead4;
    --scene-ribbon-b: #a78bfa;
    --scene-ribbon-c: #7dd3fc;
}
.onboarding-scene--night,
:root[data-theme="dark"] .onboarding-scene {
    --scene-sky: linear-gradient(180deg, hsl(222, 50%, 8%) 0%, hsl(232, 45%, 14%) 45%, hsl(248, 40%, 24%) 72%);
    --scene-glow: rgba(160, 170, 230, 0.35);
    --scene-disc: hsl(240, 30%, 90%);
    --scene-ux: 0.83;
    --scene-uy: 0.17;
    --scene-ur: 0.045;
    --scene-dune-1: hsl(214, 32%, 22%);
    --scene-dune-2: hsl(222, 32%, 17%);
    --scene-dune-3: hsl(230, 32%, 12%);
    --scene-dune-4: hsl(238, 32%, 8%);
    --scene-haze: rgba(180, 190, 255, 0.06);
    --scene-veil: radial-gradient(ellipse at 50% 50%, rgba(17, 22, 36, 0.25) 0%, rgba(17, 22, 36, 0) 70%);
    --scene-stars: 1;
}
.onboarding-scene--aurora,
:root[data-theme="glass"] .onboarding-scene {
    --scene-sky: linear-gradient(180deg, #0f0822 0%, #1c1240 42%, #2c1d5a 70%);
    --scene-glow: rgba(167, 139, 250, 0.30);
    --scene-disc: #ece4ff;
    --scene-ux: 0.84;
    --scene-uy: 0.14;
    --scene-ur: 0.035;
    --scene-dune-1: hsl(262, 35%, 20%);
    --scene-dune-2: hsl(268, 35%, 15%);
    --scene-dune-3: hsl(274, 35%, 10%);
    --scene-dune-4: hsl(280, 35%, 6.5%);
    --scene-haze: rgba(200, 180, 255, 0.05);
    --scene-veil: radial-gradient(ellipse at 50% 50%, rgba(20, 12, 40, 0.20) 0%, rgba(20, 12, 40, 0) 70%);
    --scene-stars: 0.85;
    --scene-ribbons: 1;
}
/* The web start page's canvas and cover scaling, so the moon does not jump between the two. */
@media (aspect-ratio < 1) {
    .onboarding-scene {
        --scene-cw: 360;
        --scene-ch: 728;
    }
    .onboarding-scene--night,
    .onboarding-scene--aurora,
    :root[data-theme="dark"] .onboarding-scene,
    :root[data-theme="glass"] .onboarding-scene {
        --scene-ux: 0.8;
        --scene-uy: 0.12;
    }
}