/* SteamAdd website color system. Components use semantic tokens only. */
[hidden] {
  display: none !important;
}

:root {
  color-scheme: dark;
  --color-primary: #4387f4;
  --color-primary-hover: #5594f6;
  --color-primary-active: #3478e5;
  --color-on-primary: #ffffff;
  --color-primary-soft: rgba(67, 135, 244, .12);
  --color-focus-ring: rgba(67, 135, 244, .22);
  --color-success: #48d69c;
  --color-danger: #ff7b83;
  --color-background: #090d12;
  --color-surface: #111820;
  --color-surface-raised: #161f29;
  --color-surface-hover: #202b36;
  --color-surface-overlay: #1b2631;
  --color-border: #25313d;
  --color-text: #f2f5f7;
  --color-text-muted: #93a0ad;
  --color-shadow: rgba(0, 0, 0, .24);
  --color-warning: #e8bb62;
  --bg: var(--color-background);
  --panel: var(--color-surface);
  --panel-2: var(--color-surface-raised);
  --line: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --brand: var(--color-primary);
  --brand-2: var(--color-primary-hover);
  --danger: var(--color-danger);
  --warning: var(--color-warning);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-background: #f7f8fc;
    --color-surface: #ffffff;
    --color-surface-raised: #f1f4f8;
    --color-surface-hover: #e8edf4;
    --color-surface-overlay: #ffffff;
    --color-border: #d8e0e8;
    --color-text: #1c232b;
    --color-text-muted: #667382;
    --color-shadow: rgba(31, 50, 67, .12);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-background: #f7f8fc;
  --color-surface: #ffffff;
  --color-surface-raised: #f1f4f8;
  --color-surface-hover: #e8edf4;
  --color-surface-overlay: #ffffff;
  --color-border: #d8e0e8;
  --color-text: #1c232b;
  --color-text-muted: #667382;
  --color-shadow: rgba(31, 50, 67, .12);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #090d12;
  --color-surface: #111820;
  --color-surface-raised: #161f29;
  --color-surface-hover: #202b36;
  --color-surface-overlay: #1b2631;
  --color-border: #25313d;
  --color-text: #f2f5f7;
  --color-text-muted: #93a0ad;
  --color-shadow: rgba(0, 0, 0, .24);
}

html,
body {
  background: var(--color-background);
  color: var(--color-text);
}

input,
select,
textarea {
  color: var(--color-text);
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
}

::selection {
  color: var(--color-on-primary);
  background: var(--color-primary);
}

/* Shared brand treatment. Auth pages must not invent a separate black logo. */
.brand-mark,
.auth-brand .brand-mark {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 8px 24px var(--color-primary-soft);
}

.auth-brand {
  background:
    radial-gradient(circle at 20% 12%, var(--color-primary-soft), transparent 38%),
    var(--color-surface);
  color: var(--color-text);
}