/* Application-wide appearance bridge.

   Legacy Season Lab surfaces already consume a small set of root variables.
   Redefining those variables lets System/Light/Dark work now while the UI is
   progressively converted to richer semantic Analytical Strip tokens. */

@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) {
    --bg: #0e1219;
    --card: #171d27;
    --ink: #edf1f7;
    --muted: #aab4c3;
    --line: #343e4d;
    --navy: #0a1830;
    --accent: #83a8ff;
    --good: #63c692;
  }
}

:root[data-appearance="dark"] {
  --bg: #0e1219;
  --card: #171d27;
  --ink: #edf1f7;
  --muted: #aab4c3;
  --line: #343e4d;
  --navy: #0a1830;
  --accent: #83a8ff;
  --good: #63c692;
}

:root[data-appearance="light"] {
  --bg: #f5f6f8;
  --card: #ffffff;
  --ink: #172033;
  --muted: #687187;
  --line: #e3e6eb;
  --navy: #14264b;
  --accent: #2c6bed;
  --good: #13795b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) body,
  :root:not([data-appearance="light"]) input,
  :root:not([data-appearance="light"]) select,
  :root:not([data-appearance="light"]) textarea,
  :root:not([data-appearance="light"]) button {
    color-scheme: dark;
  }

  :root:not([data-appearance="light"]) input,
  :root:not([data-appearance="light"]) select,
  :root:not([data-appearance="light"]) textarea {
    color: var(--ink);
    background: var(--card);
    border-color: var(--line);
  }

  :root:not([data-appearance="light"]) code {
    color: var(--ink);
    background: #222b38;
  }

  :root:not([data-appearance="light"]) .filters a,
  :root:not([data-appearance="light"]) .source-chip,
  :root:not([data-appearance="light"]) .flash,
  :root:not([data-appearance="light"]) .env-row,
  :root:not([data-appearance="light"]) .pager-button,
  :root:not([data-appearance="light"]) .visual-decision-card,
  :root:not([data-appearance="light"]) .candidate-zone {
    color: var(--ink);
    background: var(--card);
    border-color: var(--line);
  }

  :root:not([data-appearance="light"]) .legend-item,
  :root:not([data-appearance="light"]) .target-zone {
    color: var(--ink);
    background: #1d2531;
    border-color: var(--line);
  }

  :root:not([data-appearance="light"]) .teams .mine,
  :root:not([data-appearance="light"]) .mine-row {
    background: #1b2940;
  }

  :root:not([data-appearance="light"]) .prose p,
  :root:not([data-appearance="light"]) .reason {
    color: var(--muted);
  }

  :root:not([data-appearance="light"]) .secondary-button {
    color: #edf1f7;
    background: #222b38;
    border-color: #4a5567;
  }
}

:root[data-appearance="dark"] body,
:root[data-appearance="dark"] input,
:root[data-appearance="dark"] select,
:root[data-appearance="dark"] textarea,
:root[data-appearance="dark"] button {
  color-scheme: dark;
}

:root[data-appearance="dark"] input,
:root[data-appearance="dark"] select,
:root[data-appearance="dark"] textarea {
  color: var(--ink);
  background: var(--card);
  border-color: var(--line);
}

:root[data-appearance="dark"] code {
  color: var(--ink);
  background: #222b38;
}

:root[data-appearance="dark"] .filters a,
:root[data-appearance="dark"] .source-chip,
:root[data-appearance="dark"] .flash,
:root[data-appearance="dark"] .env-row,
:root[data-appearance="dark"] .pager-button,
:root[data-appearance="dark"] .visual-decision-card,
:root[data-appearance="dark"] .candidate-zone {
  color: var(--ink);
  background: var(--card);
  border-color: var(--line);
}

:root[data-appearance="dark"] .legend-item,
:root[data-appearance="dark"] .target-zone {
  color: var(--ink);
  background: #1d2531;
  border-color: var(--line);
}

:root[data-appearance="dark"] .teams .mine,
:root[data-appearance="dark"] .mine-row {
  background: #1b2940;
}

:root[data-appearance="dark"] .prose p,
:root[data-appearance="dark"] .reason {
  color: var(--muted);
}

:root[data-appearance="dark"] .secondary-button {
  color: #edf1f7;
  background: #222b38;
  border-color: #4a5567;
}

/* Authentication and invitation cards are deliberately light surfaces even
   when the surrounding application follows a dark device preference. */
.auth-card {
  --card: #ffffff;
  --ink: #172033;
  --muted: #687187;
  --line: #d8dee8;
  --navy: #14264b;
  --accent: #2c6bed;
  color: var(--ink);
  background: var(--card);
  color-scheme: light;
}

.auth-card input,
.auth-card select,
.auth-card textarea,
.auth-card button { color-scheme: light; }

.auth-card input,
.auth-card select,
.auth-card textarea {
  color: var(--ink);
  background: var(--card);
  border-color: var(--line);
}

.auth-card .muted { color: var(--muted); }
.auth-card .primary-button { color: #fff; background: var(--navy); border-color: var(--navy); }
.auth-card .secondary-button { color: var(--ink); background: #fff; border-color: var(--line); }

.appearance-form {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
}

.appearance-form label {
  display: grid;
  gap: 5px;
  min-width: 220px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.appearance-form select {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.appearance-form button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}