:root {
  --font-family: "Segoe UI", "Aptos", "Helvetica Neue", sans-serif;

  --color-bg: #F4F6F9;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F1F4F8;
  --color-text: #1A2433;
  --color-text-soft: #5B6B7F;
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-success: #16A34A;
  --color-danger: #DC2626;
  --color-border: #D8DEE8;

  --color-overlay: rgba(17, 31, 60, 0.38);
  --color-header-bg: rgba(255, 255, 255, 0.88);
  --color-header-border: rgba(31, 41, 55, 0.08);
  --color-footer-bg: #EFF2F6;
  --color-footer-border: #DDE3EE;
  --color-footer-link: #49566A;
  --color-footer-meta: #677488;

  --color-text-inverse: #FFFFFF;
  --color-surface-contrast: #FFFFFF;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

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

  --shadow-soft: 0 12px 30px rgba(31, 41, 55, 0.06);
  --shadow-surface: 0 8px 24px rgba(31, 41, 55, 0.06);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.24);
  --shadow-header: 0 4px 18px rgba(31, 41, 55, 0.04);

  --header-height: 74px;
  --content-width: 1100px;

  color-scheme: light;
}

html[data-theme="dark"] {
  --color-bg: #070B11;
  --color-surface: #1A2330;
  --color-surface-muted: #232E3D;
  --color-text: #F1F6FF;
  --color-text-soft: #B7C4D7;
  --color-primary: #4F83FF;
  --color-primary-hover: #6A95FF;
  --color-success: #38C275;
  --color-danger: #F06A6A;
  --color-border: #3A4658;

  --color-overlay: rgba(3, 7, 12, 0.68);
  --color-header-bg: rgba(16, 23, 34, 0.9);
  --color-header-border: rgba(173, 189, 211, 0.22);
  --color-footer-bg: #121B28;
  --color-footer-border: #354258;
  --color-footer-link: #C1CEE0;
  --color-footer-meta: #9FB0C8;

  --color-text-inverse: #0E1722;
  --color-surface-contrast: #202B39;

  --shadow-soft: 0 20px 46px rgba(0, 0, 0, 0.46);
  --shadow-surface: 0 12px 30px rgba(0, 0, 0, 0.44);
  --shadow-focus: 0 0 0 3px rgba(79, 131, 255, 0.44);
  --shadow-header: 0 10px 30px rgba(0, 0, 0, 0.34);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--color-primary);
  text-decoration-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-primary-hover);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -200px;
  z-index: 1200;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-surface);
}

.skip-link:focus {
  top: var(--space-3);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* Global dark-mode harmonization for existing components */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .home-preview-card,
html[data-theme="dark"] .home-note,
html[data-theme="dark"] .home-benefit,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .price-line,
html[data-theme="dark"] .collection-item {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text);
}

html[data-theme="dark"] .metric,
html[data-theme="dark"] .collection-item__prices,
html[data-theme="dark"] .filter-card,
html[data-theme="dark"] .status-badge--planned,
html[data-theme="dark"] .status-badge--bought,
html[data-theme="dark"] .item-quantity-badge,
html[data-theme="dark"] .collection-item__alternatives-toggle,
html[data-theme="dark"] .icon-button-subtle,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .summary-card {
  background: var(--color-surface-muted) !important;
  border-color: var(--color-border) !important;
}

html[data-theme="dark"] .collection-item--bought {
  background: linear-gradient(0deg, #1A2533 0%, #212E3F 100%) !important;
}

html[data-theme="dark"] .button-ghost,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .modal-close,
html[data-theme="dark"] .alternative-form input,
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field textarea,
html[data-theme="dark"] .filter-control input,
html[data-theme="dark"] .filter-control select {
  background: var(--color-surface-contrast) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}

html[data-theme="dark"] .button-primary {
  color: var(--color-primary) !important;
}

html[data-theme="dark"] .button-ghost,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .modal-close {
  color: var(--color-text-soft) !important;
}

html[data-theme="dark"] .button-ghost:hover,
html[data-theme="dark"] .icon-button:hover,
html[data-theme="dark"] .modal-close:hover,
html[data-theme="dark"] .collection-overview-card__link:hover {
  background: #2A374A !important;
  color: var(--color-text) !important;
}

html[data-theme="dark"] .icon-button-danger,
html[data-theme="dark"] .collection-item__action-button--danger,
html[data-theme="dark"] .collection-delete-button {
  color: #FF9E9E !important;
  border-color: #6A3232 !important;
  background: #342020 !important;
}

html[data-theme="dark"] .icon-button-danger:hover,
html[data-theme="dark"] .collection-item__action-button--danger:hover,
html[data-theme="dark"] .collection-delete-button:hover {
  background: #3A2020 !important;
}

html[data-theme="dark"] .field-help,
html[data-theme="dark"] .filter-card__hint,
html[data-theme="dark"] .kpi-card__label,
html[data-theme="dark"] .metric__label,
html[data-theme="dark"] .price-main__formula,
html[data-theme="dark"] .price-diff__label,
html[data-theme="dark"] .home-subline,
html[data-theme="dark"] .home-preview-card__hint,
html[data-theme="dark"] .empty-state p,
html[data-theme="dark"] .collection-item__note,
html[data-theme="dark"] .collection-item__alternatives-empty,
html[data-theme="dark"] .collection-overview-card__meta-row span,
html[data-theme="dark"] .collection-overview-card__price-label,
html[data-theme="dark"] .app-footer__meta,
html[data-theme="dark"] .home-trust-list li {
  color: var(--color-text-soft) !important;
}

html[data-theme="dark"] .collection-item__domain-link,
html[data-theme="dark"] .collection-item__alternatives-list a,
html[data-theme="dark"] .app-footer__nav a {
  color: #B5C2D4 !important;
}

html[data-theme="dark"] .collection-item__domain-link:hover,
html[data-theme="dark"] .collection-item__alternatives-list a:hover,
html[data-theme="dark"] .app-footer__nav a:hover {
  color: var(--color-text) !important;
}

html[data-theme="dark"] .modal-backdrop {
  background: var(--color-overlay) !important;
}

html[data-theme="dark"] .app-toast {
  border-color: #2E5E42 !important;
  background: #163024 !important;
  color: #BEEBD0 !important;
}

html[data-theme="dark"] .app-toast--neutral {
  border-color: #34445A !important;
  background: #1A2432 !important;
  color: #B9C7D8 !important;
}

html[data-theme="dark"] .empty-state {
  border-color: #34445A !important;
  background: #161E2A !important;
}

@media (max-width: 720px) {
  :root {
    --header-height: 66px;
  }

  html {
    font-size: 15px;
  }
}