/* Semantic design tokens. Light under :root, dark under [data-theme="dark"].
   When no explicit data-theme is set, follow the OS preference. */
:root {
  --surface: #ffffff;
  --surface-muted: #f8fafc;
  --surface-raised: #ffffff;
  --overlay: rgb(15 23 42 / 0.4);

  --border: #e6e8ec;
  --border-strong: #cdd1d8;

  --text: #0b1220;
  --text-muted: #5b6577;
  --text-subtle: #8a93a3;

  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-contrast: #ffffff;
  --accent-subtle: #eef0ff;

  --success: #15803d;
  --success-subtle: #e7f6ec;
  --warning: #b45309;
  --warning-subtle: #fdf2e3;
  --danger: #b91c1c;
  --danger-subtle: #fdecec;
  --info: #1d4ed8;
  --info-subtle: #e8effd;

  --ring: #6366f1;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;

  --shadow-card: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
  --shadow-pop: 0 4px 12px rgb(15 23 42 / 0.10), 0 2px 4px rgb(15 23 42 / 0.06);
}

[data-theme="dark"] {
  --surface: #0b0e14;
  --surface-muted: #11151d;
  --surface-raised: #161b24;
  --overlay: rgb(0 0 0 / 0.6);

  --border: #232a35;
  --border-strong: #313a48;

  --text: #e7ebf2;
  --text-muted: #9aa4b2;
  --text-subtle: #6b7585;

  --accent: #818cf8;
  --accent-hover: #a5b4fc;
  --accent-contrast: #0b0e14;
  --accent-subtle: #1b2030;

  --success: #4ade80;
  --success-subtle: #11271a;
  --warning: #fbbf24;
  --warning-subtle: #2a1f0c;
  --danger: #f87171;
  --danger-subtle: #2a1414;
  --info: #60a5fa;
  --info-subtle: #0f1d33;

  --ring: #818cf8;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.5);
  --shadow-pop: 0 4px 14px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0b0e14;
    --surface-muted: #11151d;
    --surface-raised: #161b24;
    --overlay: rgb(0 0 0 / 0.6);
    --border: #232a35;
    --border-strong: #313a48;
    --text: #e7ebf2;
    --text-muted: #9aa4b2;
    --text-subtle: #6b7585;
    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-contrast: #0b0e14;
    --accent-subtle: #1b2030;
    --success: #4ade80;
    --success-subtle: #11271a;
    --warning: #fbbf24;
    --warning-subtle: #2a1f0c;
    --danger: #f87171;
    --danger-subtle: #2a1414;
    --info: #60a5fa;
    --info-subtle: #0f1d33;
    --ring: #818cf8;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 1px 3px rgb(0 0 0 / 0.5);
    --shadow-pop: 0 4px 14px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.4);
  }
}