/**
 * Proton design tokens — generated from design/tokens.json
 * Change values in tokens.json, then mirror them here until a build script exists.
 */
:root {
  /* Colors */
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-primary-light: #eef2ff;
  --color-destructive: #dc2626;
  --color-destructive-hover: #b91c1c;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-surface: #ffffff;
  --color-surface-dark: #111827;
  --color-background: #f3f4f6;
  --color-background-dark: #000000;
  --color-border: #e5e7eb;
  --color-border-dark: #1f2937;
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-text-dark: #f9fafb;
  --color-text-muted-dark: #9ca3af;

  /* Radius */
  --radius-button: 0.75rem;
  --radius-card: 1.5rem;
  --radius-modal: 2rem;
  --radius-input: 0.5rem;

  /* Typography */
  --font-body: 'Noto Sans', sans-serif;

  /* Z-index scale */
  --z-modal: 100;
  --z-modal-confirm: 110;
  --z-toast: 120;
  --z-lightbox: 150;

  /* Proton aliases (preferred in docs / new code) */
  --proton-color-primary: var(--color-primary);
  --proton-color-primary-hover: var(--color-primary-hover);
  --proton-color-primary-light: var(--color-primary-light);
  --proton-color-destructive: var(--color-destructive);
  --proton-color-destructive-hover: var(--color-destructive-hover);
  --proton-color-surface: var(--color-surface);
  --proton-color-surface-dark: var(--color-surface-dark);
  --proton-color-border: var(--color-border);
  --proton-color-border-dark: var(--color-border-dark);
  --proton-color-text: var(--color-text);
  --proton-color-text-muted: var(--color-text-muted);
  --proton-color-text-dark: var(--color-text-dark);
  --proton-color-text-muted-dark: var(--color-text-muted-dark);
  --proton-radius-button: var(--radius-button);
  --proton-radius-card: var(--radius-card);
  --proton-radius-modal: var(--radius-modal);
  --proton-radius-input: var(--radius-input);
  --proton-z-modal: var(--z-modal);
  --proton-z-modal-confirm: var(--z-modal-confirm);
  --proton-z-toast: var(--z-toast);
  --proton-z-lightbox: var(--z-lightbox);
}

/* Shared component utilities — used by views/components/* */
.proton-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border-radius: var(--proton-radius-button);
}
.proton-btn:focus-visible {
  outline: 2px solid var(--proton-color-primary);
  outline-offset: 2px;
}
.proton-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.proton-btn--sm { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.proton-btn--md { padding: 0.5rem 1rem; font-size: 0.875rem; }
.proton-btn--lg { padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 500; }
.proton-btn--primary {
  background-color: var(--proton-color-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.proton-btn--primary:hover:not(:disabled) {
  background-color: var(--proton-color-primary-hover);
}
.proton-btn--secondary {
  background-color: var(--proton-color-surface);
  color: var(--proton-color-text);
  border: 1px solid var(--proton-color-border);
}
.proton-btn--secondary:hover:not(:disabled) {
  background-color: #f9fafb;
}
.dark .proton-btn--secondary {
  background-color: #1f2937;
  color: var(--proton-color-text-dark);
  border-color: var(--proton-color-border-dark);
}
.dark .proton-btn--secondary:hover:not(:disabled) {
  background-color: #374151;
}
.proton-btn--destructive {
  background-color: var(--proton-color-destructive);
  color: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.proton-btn--destructive:hover:not(:disabled) {
  background-color: var(--proton-color-destructive-hover);
}
.proton-btn--ghost {
  background: transparent;
  color: var(--proton-color-text-muted);
}
.proton-btn--ghost:hover:not(:disabled) {
  background-color: #f3f4f6;
  color: var(--proton-color-text);
}
.dark .proton-btn--ghost {
  color: var(--proton-color-text-muted-dark);
}
.dark .proton-btn--ghost:hover:not(:disabled) {
  background-color: #1f2937;
  color: var(--proton-color-text-dark);
}

.proton-card {
  background-color: var(--proton-color-surface);
  border: 1px solid var(--proton-color-border);
  border-radius: var(--proton-radius-card);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  overflow: hidden;
}
.dark .proton-card {
  background-color: var(--proton-color-surface-dark);
  border-color: var(--proton-color-border-dark);
}

.proton-input {
  border-radius: var(--proton-radius-input);
}
.proton-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--proton-color-primary);
  border-color: transparent;
}

.proton-empty-icon {
  background-color: #f3f4f6;
  color: var(--proton-color-text-muted);
}
.dark .proton-empty-icon {
  background-color: #1f2937;
  color: var(--proton-color-text-muted-dark);
}

.proton-step-active {
  background-color: var(--proton-color-primary);
}
.proton-progress-fill {
  background-color: var(--proton-color-primary);
}