/*
 * Biến thiết kế dùng chung (Việt Hàn Derma). Chỉ giám đốc sửa tệp này; portal.css, site.css, staff.css dùng lại biến.
 * Màu chính: xanh ngọc trầm (da liễu, sạch, tin cậy); nhấn: hồng đất (ấm, thẩm mỹ); nền: kem.
 * Nền tối: Filament tự đổi theo lớp .dark trên <html>; trang công khai / cổng dùng prefers-color-scheme + .dark.
 */
:root {
  --spa-font: 'Be Vietnam Pro', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --spa-primary: #1f6f6b;
  --spa-primary-strong: #175753;
  --spa-primary-soft: #e3f0ee;
  --spa-on-primary: #ffffff;

  --spa-accent: #b4566a;
  --spa-accent-soft: #f6e6e9;

  --spa-bg: #f7f3ee;
  --spa-surface: #ffffff;
  --spa-surface-2: #fbf8f4;
  --spa-border: #e4ddd3;
  --spa-text: #1f2a2a;
  --spa-text-muted: #5b6766;

  --spa-success: #2f7d4f;
  --spa-warning: #a15c07;
  --spa-danger: #b42318;

  --spa-radius-sm: 8px;
  --spa-radius: 12px;
  --spa-radius-lg: 20px;
  --spa-shadow: 0 1px 2px rgb(31 42 42 / 6%), 0 4px 16px rgb(31 42 42 / 6%);
  --spa-focus: 0 0 0 3px rgb(31 111 107 / 35%);

  --spa-space-1: 4px;
  --spa-space-2: 8px;
  --spa-space-3: 12px;
  --spa-space-4: 16px;
  --spa-space-5: 24px;
  --spa-space-6: 32px;
  --spa-space-7: 48px;

  --spa-tap: 44px; /* vùng bấm tối thiểu */
}

.dark,
:root[data-theme='dark'] {
  --spa-primary: #5fb7ae;
  --spa-primary-strong: #7fcac2;
  --spa-primary-soft: #16302e;
  --spa-on-primary: #0f1a19;

  --spa-accent: #e08a9b;
  --spa-accent-soft: #3a2228;

  --spa-bg: #121716;
  --spa-surface: #1a2120;
  --spa-surface-2: #202928;
  --spa-border: #2e3a38;
  --spa-text: #e8eeec;
  --spa-text-muted: #a3b1ae;

  --spa-success: #6cc28f;
  --spa-warning: #e0a44c;
  --spa-danger: #f2877d;

  --spa-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 16px rgb(0 0 0 / 25%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']):not(.light) {
    --spa-primary: #5fb7ae;
    --spa-primary-strong: #7fcac2;
    --spa-primary-soft: #16302e;
    --spa-on-primary: #0f1a19;
    --spa-accent: #e08a9b;
    --spa-accent-soft: #3a2228;
    --spa-bg: #121716;
    --spa-surface: #1a2120;
    --spa-surface-2: #202928;
    --spa-border: #2e3a38;
    --spa-text: #e8eeec;
    --spa-text-muted: #a3b1ae;
    --spa-success: #6cc28f;
    --spa-warning: #e0a44c;
    --spa-danger: #f2877d;
  }
}