/* Design tokens. Semantic layer over a small brand palette.
   Light is the default (:root). Dark applies when the OS prefers dark
   (unless the user forced light) OR when data-theme="dark" is set.
   data-theme="light" forces light even under an OS-dark preference.
   Full component kit + palette expands in the design-system task (WI000251). */

:root {
  color-scheme: light;

  /* Brand — iOS workItHeader teal rgb(0.11,0.29,0.33) */
  --brand: #1c4a54;
  --brand-hover: #163b43;
  --brand-active: #102b31;
  --on-brand: #e1f5ee;

  /* Surfaces / text / borders */
  --bg: #ffffff;
  --bg-elevated: #f7f8f8;
  --surface: #ffffff;
  --surface-2: #f1f2f3;
  --rail: #15363e;
  --text: #1a1c1d;
  --text-muted: #5f6368;
  --text-faint: #8a9097;
  --border: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.18);
  --overlay: rgba(0, 0, 0, 0.45);

  /* Semantic accents */
  --accent: var(--brand);
  --danger: #c0392b;
  --danger-bg: #fdecea;
  --success: #1d9e75;
  --warning: #b9770b;

  /* Shape / type */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Dark values (kept in one block, applied via two selectors below) ----
   No build step = no mixins, so the dark declarations are duplicated. Keep
   the two blocks identical. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #16181a;
    --bg-elevated: #1d2022;
    --surface: #1d2022;
    --surface-2: #26292c;
    --rail: #0f262c;
    --text: #e7e9ea;
    --text-muted: #a3a8ad;
    --text-faint: #7b8186;
    --border: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.20);
    --overlay: rgba(0, 0, 0, 0.60);
    --danger: #ff6b5e;
    --danger-bg: #3a1d1a;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #16181a;
  --bg-elevated: #1d2022;
  --surface: #1d2022;
  --surface-2: #26292c;
  --rail: #0f262c;
  --text: #e7e9ea;
  --text-muted: #a3a8ad;
  --text-faint: #7b8186;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.20);
  --overlay: rgba(0, 0, 0, 0.60);
  --danger: #ff6b5e;
  --danger-bg: #3a1d1a;
}