/* ── Design Tokens ──────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  /* Primary (indigo) */
  --color-primary: light-dark(#2563eb, #3b82f6);
  --color-primary-hover: light-dark(#1d4ed8, #2563eb);
  --color-primary-light: light-dark(#eff6ff, #172554);
  --color-primary-border: light-dark(#bfdbfe, #1e40af);

  /* Accent (violet) */
  --color-accent: light-dark(#7c3aed, #8b5cf6);
  --color-accent-light: light-dark(#f5f3ff, #2e1065);

  /* Danger (red) */
  --color-danger: light-dark(#dc2626, #ef4444);
  --color-danger-hover: light-dark(#b91c1c, #dc2626);
  --color-danger-light: light-dark(#fef2f2, #450a0a);
  --color-danger-border: light-dark(#fecaca, #991b1b);

  /* Success (emerald) */
  --color-success: light-dark(#059669, #10b981);
  --color-success-light: light-dark(#ecfdf5, #064e3b);

  /* Warning (amber) */
  --color-warning: light-dark(#d97706, #f59e0b);
  --color-warning-light: light-dark(#fffbeb, #451a03);

  /* Gray scale — semantic: 50 = faintest bg, 900 = strongest text */
  --color-gray-50:  light-dark(#f9fafb, #0f172a);
  --color-gray-100: light-dark(#f3f4f6, #1e293b);
  --color-gray-200: light-dark(#e5e7eb, #334155);
  --color-gray-300: light-dark(#d1d5db, #475569);
  --color-gray-400: light-dark(#9ca3af, #64748b);
  --color-gray-500: light-dark(#6b7280, #94a3b8);
  --color-gray-600: light-dark(#4b5563, #cbd5e1);
  --color-gray-700: light-dark(#374151, #e2e8f0);
  --color-gray-800: light-dark(#1f2937, #f1f5f9);
  --color-gray-900: light-dark(#111827, #f8fafc);

  /* Surfaces */
  --surface:        light-dark(#ffffff, #0f172a);
  --surface-raised: light-dark(#ffffff, #1e293b);
  --surface-inset:  light-dark(#f9fafb, #0c1222);

  /* Borders */
  --border:       light-dark(#e5e7eb, #334155);
  --border-muted: light-dark(#f3f4f6, #1e293b);

  /* Fonts */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Fira Code", monospace;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows — use @media for dark since light-dark() only takes <color> */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.08), 0 1px 2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.1), 0 2px 4px rgb(0 0 0 / 0.06);

  /* Motion */
  --transition: 150ms ease;
}

/* Theme override via data-theme attribute */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root {
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.2);
    --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.4), 0 2px 4px rgb(0 0 0 / 0.25);
  }
}

/* ── Reset ──────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-gray-800);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Buttons ────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

.btn-secondary {
  background: var(--surface);
  color: var(--color-gray-700);
  border-color: var(--color-gray-300);
}

.btn-secondary:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}

.btn-danger:hover {
  background: var(--color-danger-hover);
}

.btn-sm {
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
}

/* ── Inputs ─────────────────────────────────────────────────── */

.input, .textarea, .select {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: var(--font-sans);
  line-height: 1.5;
  color: var(--color-gray-800);
  background: var(--surface);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.textarea {
  resize: vertical;
  min-height: 5rem;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

@media (prefers-color-scheme: dark) {
  .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  }
}

.label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
}

.form-group {
  margin-bottom: 1rem;
}

.field-error {
  display: none;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-danger);
}

.field-error[data-visible] {
  display: block;
}

.input-error {
  border-color: var(--color-danger) !important;
}

.input-error:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 15%, transparent) !important;
}

/* ── Cards ──────────────────────────────────────────────────── */

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-body {
  padding: 1.25rem;
}

/* ── Badges ─────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  line-height: 1.5;
}

.badge-primary {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.badge-accent {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.badge-warning {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.badge-success {
  background: var(--color-success-light);
  color: var(--color-success);
}

.badge-gray {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* ── Alerts ─────────────────────────────────────────────────── */

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}

.alert-error {
  background: var(--color-danger-light);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
}

.alert-success {
  background: var(--color-success-light);
  color: var(--color-success);
}

/* ── Page section ───────────────────────────────────────────── */

.page-section {
  padding: 1rem;
  max-width: 900px;
}

@media (min-width: 48rem) {
  .page-section {
    padding: 2rem;
  }
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gray-900);
}

@media (min-width: 48rem) {
  .page-header h1 {
    font-size: 1.5rem;
  }
}

/* ── Empty state ────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-gray-500);
}

.empty-state p {
  margin: 0.5rem 0 0;
}

/* ── Table ──────────────────────────────────────────────────── */

table tbody tr {
  border-bottom: 1px solid var(--border-muted);
}

table tbody tr:last-child {
  border-bottom: none;
}

table tbody td {
  padding: 0.625rem 1rem;
}

/* ── Reading mode ───────────────────────────────────────────── */

body:has(.reading-mode) .app-body > widget-nav {
  display: none;
}

body:has(.reading-mode) .app-header {
  border-bottom-color: transparent;
  box-shadow: none;
}