/* Shared material and color roles. Legacy glass variables remain aliases so
   existing forms, menus, dialogs and tables use the same surface hierarchy. */
:root {
  --ui-canvas: #f4f6f5;
  --ui-surface: #ffffff;
  --ui-surface-raised: #ffffff;
  --ui-surface-muted: #f7f9f8;
  --ui-surface-hover: #eef2f0;
  --ui-chrome: #fbfcfb;
  --ui-text: #25312e;
  --ui-text-secondary: #596660;
  --ui-text-muted: #67766e;
  --ui-border: #e2e8e4;
  --ui-border-strong: #ccd6d0;
  --ui-accent: #34786c;
  --ui-accent-hover: #2b6258;
  --ui-accent-ink: #2b6258;
  --ui-accent-soft: #e9f2ee;
  --ui-accent-border: #cbded5;
  --ui-on-accent: #ffffff;
  --ui-shadow-sm: 0 1px 2px rgb(28 44 36 / 0.035), 0 3px 10px rgb(28 44 36 / 0.025);
  --ui-shadow: 0 8px 24px rgb(28 44 36 / 0.065);
  --ui-shadow-lg: 0 16px 48px rgb(28 44 36 / 0.13);
  --ui-edge: rgb(255 255 255 / 0.55);
  --ui-icon-teal: 68 120 105;
  --ui-icon-blue: 87 118 146;
  --ui-icon-violet: 126 112 148;
  --ui-icon-amber: 153 122 68;
  --ui-icon-rose: 162 105 115;
  --ui-icon-slate: 109 124 118;
  --glass-bg: var(--ui-surface);
  --glass-bg-strong: var(--ui-surface-raised);
  --glass-bg-inset: var(--ui-surface-muted);
  --glass-bg-subtle: var(--ui-surface-muted);
  --glass-border: var(--ui-border);
  --glass-border-strong: var(--ui-border-strong);
  --glass-edge-hi: var(--ui-edge);
  --glass-shadow-sm: var(--ui-shadow-sm);
  --glass-shadow: var(--ui-shadow);
  --glass-shadow-lg: var(--ui-shadow-lg);
  --glass-blur: 0px;
  --glass-blur-sm: 0px;
  --glass-saturate: 100%;
  --wallpaper-base: var(--ui-canvas);
}

.dark {
  --ui-canvas: #111719;
  --ui-surface: #1a2225;
  --ui-surface-raised: #202a2d;
  --ui-surface-muted: #171f22;
  --ui-surface-hover: #273235;
  --ui-chrome: #161e21;
  --ui-text: #e5ece8;
  --ui-text-secondary: #adbab3;
  --ui-text-muted: #87978f;
  --ui-border: #2c393d;
  --ui-border-strong: #43534f;
  --ui-accent: #8ac1ad;
  --ui-accent-hover: #a4d0bf;
  --ui-accent-ink: #a4d0bf;
  --ui-accent-soft: #233a33;
  --ui-accent-border: #3b5b4f;
  --ui-on-accent: #132b23;
  --ui-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.1);
  --ui-shadow: 0 8px 24px rgb(0 0 0 / 0.16);
  --ui-shadow-lg: 0 16px 48px rgb(0 0 0 / 0.3);
  --ui-edge: rgb(255 255 255 / 0.025);
}

/* These semantic classes avoid recoloring warning, error or provider states. */
.ui-emphasis { color: var(--ui-accent-ink); }
.ui-value { color: var(--ui-text); }
.ui-secondary { color: var(--ui-text-secondary); }
.ui-subtle { color: var(--ui-text-muted); }

.console-shell { background: var(--ui-canvas); color: var(--ui-text); }
.console-header { background: var(--ui-chrome); border-bottom: 1px solid var(--ui-border); }
.console-feature {
  background: linear-gradient(115deg, var(--ui-accent-soft), var(--ui-surface) 72%);
  border: 1px solid var(--ui-accent-border);
}
.console-feature h2 { text-wrap: balance; }
.announcement-heading { background: var(--ui-surface-muted); border-color: var(--ui-border); }
.announcement-mark { color: var(--ui-accent-ink); background: var(--ui-accent-soft); }
.announcement-accent-bar { background: var(--ui-accent-border); }
.console-avatar { background: var(--ui-accent); color: var(--ui-on-accent); }
.console-balance { background: var(--ui-accent-soft); color: var(--ui-accent-ink); }
.console-balance > svg, .console-balance > span { color: inherit; }
.guest-notice {
  background: var(--ui-surface-muted);
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-accent-border);
}
.quick-action { background: var(--ui-surface-muted); border-color: var(--ui-border); }
.quick-action:hover { background: var(--ui-surface-hover); border-color: var(--ui-border-strong); }
.quick-action:focus-visible { outline-color: var(--ui-accent); }
.dashboard-stat { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .console-shell *, .console-shell *::before, .console-shell *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}