:root {
  --navy: #0A2540;
  --navy-800: #0E2E4D;
  --indigo: #635BFF;
  --indigo-600: #524AE8;
  --indigo-100: #EDECFF;
  --green: #1F9D66;
  --green-bg: #E7F7EF;
  --red: #D64545;
  --red-bg: #FBEAEA;
  --surface: #FFFFFF;
  --surface-alt: #F6F8FA;
  --border: #E3E8EF;
  --text: var(--navy);
  --text-muted: #5B6B82;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(10,37,64,0.06);
  --shadow-md: 0 4px 16px rgba(10,37,64,0.08);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --font-sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --transition-fast: 120ms ease;
  --gradient-balance: linear-gradient(135deg, var(--navy) 0%, var(--indigo) 100%);
  --gradient-atmos: linear-gradient(135deg, #E9E4FF 0%, #EAF1FF 50%, #FFF3E9 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: rgba(20, 26, 46, 0.72);
    --surface-alt: #101B33;
    --border: #223251;
    --text: #EAF0FB;
    --text-muted: #9CB0CC;
    --green-bg: rgba(31,157,102,0.15);
    --red-bg: rgba(214,69,69,0.15);
    --indigo-100: rgba(99,91,255,0.18);
  }
  :root:not([data-theme="light"]) body { background: #060B18; }
  :root:not([data-theme="light"]) select.form-control,
  :root:not([data-theme="light"]) .filter-bar select,
  :root:not([data-theme="light"]) .filter-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CB0CC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] {
  --surface: rgba(20, 26, 46, 0.72);
  --surface-alt: #101B33;
  --border: #223251;
  --text: #EAF0FB;
  --text-muted: #9CB0CC;
  --green-bg: rgba(31,157,102,0.15);
  --red-bg: rgba(214,69,69,0.15);
  --indigo-100: rgba(99,91,255,0.18);
}
:root[data-theme="dark"] body { background: #060B18; }
:root[data-theme="dark"] select.form-control,
:root[data-theme="dark"] .filter-bar select,
:root[data-theme="dark"] .filter-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CB0CC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}