:root {
  --ea-font-sans: "Inter", "SF Pro Text", "SF Pro Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Shared accents and layout tokens */
  --ea-accent-primary: #4b5563;
  --ea-accent-strong: #374151;
  --ea-accent-strong-dark: #9ca3af;
  --ea-radius-lg: 16px;
  --ea-layout-max-width: 1120px;

  /* Modern light palette (neutral white/grey) */
  --ea-light-bg: #f8f8f8;
  --ea-light-surface-primary: #ffffff;
  --ea-light-surface-secondary: #f8f8f8;
  --ea-light-surface-tertiary: #f3f3f3;
  --ea-light-surface-muted: #efefef;
  --ea-light-surface-soft: #fafafa;
  --ea-light-surface-contrast: #ffffff;
  --ea-light-surface-accent: #ececec;
  --ea-light-surface-alert: #fee2e2;
  --ea-light-surface-transparent: rgba(255, 255, 255, 0.82);
  --ea-light-text: #111111;
  --ea-light-text-muted: #333333;
  --ea-light-text-inverse: #f5f7ff;
  --ea-light-border-soft: rgba(17, 17, 17, 0.08);
  --ea-light-border-strong: rgba(17, 17, 17, 0.14);
  --ea-light-button-border: rgba(17, 17, 17, 0.12);
  --ea-light-shadow-1: 0 8px 20px rgba(0, 0, 0, 0.05);
  --ea-light-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.045);
  --ea-light-shadow-3: 0 2px 7px rgba(0, 0, 0, 0.04);
  --ea-light-shadow-4: 0 0 1px rgba(0, 0, 0, 0.08);
  --ea-light-scrollbar-track: rgba(107, 114, 128, 0.18);
  --ea-light-scrollbar-thumb: rgba(107, 114, 128, 0.42);
  --ea-light-scrollbar-thumb-hover: rgba(75, 85, 99, 0.58);

  /* Modern dark palette (shared marketing + app) */
  --ea-dark-bg: #0a0a0a;
  --ea-dark-bg-alt: #111111;
  --ea-dark-surface-primary: #111111;
  --ea-dark-surface-secondary: #1a1a1a;
  --ea-dark-surface-tertiary: rgba(26, 26, 26, 0.94);
  --ea-dark-surface-muted: rgba(31, 31, 31, 0.9);
  --ea-dark-surface-soft: rgba(20, 20, 20, 0.96);
  --ea-dark-surface-contrast: rgba(14, 14, 14, 0.98);
  --ea-dark-surface-accent: rgba(156, 163, 175, 0.25);
  --ea-dark-surface-alert: rgba(220, 38, 38, 0.18);
  --ea-dark-surface-transparent: rgba(17, 17, 17, 0.84);
  --ea-dark-text: #ffffff;
  --ea-dark-text-muted: #d1d1d1;
  --ea-dark-text-inverse: #111111;
  --ea-dark-border-soft: rgba(255, 255, 255, 0.1);
  --ea-dark-border-strong: rgba(255, 255, 255, 0.18);
  --ea-dark-button-border: rgba(255, 255, 255, 0.18);
  --ea-dark-shadow-1: 0 16px 32px rgba(0, 0, 0, 0.55);
  --ea-dark-shadow-2: 0 10px 22px rgba(0, 0, 0, 0.44);
  --ea-dark-shadow-3: 0 6px 12px rgba(0, 0, 0, 0.36);
  --ea-dark-shadow-4: 0 0 5px rgba(156, 163, 175, 0.22);
  --ea-dark-shadow-marketing: 0 30px 60px rgba(0, 0, 0, 0.35);
  --ea-dark-scrollbar-track: rgba(255, 255, 255, 0.1);
  --ea-dark-scrollbar-thumb: rgba(156, 163, 175, 0.42);
  --ea-dark-scrollbar-thumb-hover: rgba(209, 213, 219, 0.55);
  --ea-dark-background-main: #0a0a0a;

  /* Red alert palette (monochrome red CRT style) */
  --ea-red-bg: #020000;
  --ea-red-bg-alt: #070000;
  --ea-red-surface-primary: #0d0000;
  --ea-red-surface-secondary: #150000;
  --ea-red-surface-tertiary: rgba(28, 0, 0, 0.94);
  --ea-red-surface-muted: rgba(36, 0, 0, 0.9);
  --ea-red-surface-soft: rgba(20, 0, 0, 0.96);
  --ea-red-surface-contrast: rgba(12, 0, 0, 0.98);
  --ea-red-surface-accent: rgba(255, 0, 0, 0.14);
  --ea-red-surface-alert: rgba(255, 0, 0, 0.2);
  --ea-red-surface-transparent: rgba(12, 0, 0, 0.84);
  --ea-red-text: #ff0000;
  --ea-red-text-muted: #aa0000;
  --ea-red-text-inverse: #120000;
  --ea-red-border-soft: rgba(255, 0, 0, 0.22);
  --ea-red-border-strong: rgba(255, 0, 0, 0.48);
  --ea-red-button-border: rgba(255, 0, 0, 0.36);
  --ea-red-shadow-1:
    0 16px 34px rgba(0, 0, 0, 0.56),
    0 0 24px rgba(255, 0, 0, 0.2);
  --ea-red-shadow-2:
    0 10px 22px rgba(0, 0, 0, 0.46),
    0 0 14px rgba(255, 0, 0, 0.16);
  --ea-red-shadow-3:
    0 6px 14px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(255, 0, 0, 0.14);
  --ea-red-shadow-4: 0 0 8px rgba(255, 0, 0, 0.28);
  --ea-red-shadow-marketing:
    0 28px 60px rgba(0, 0, 0, 0.52),
    0 0 36px rgba(255, 0, 0, 0.18);
  --ea-red-scrollbar-track: rgba(255, 0, 0, 0.14);
  --ea-red-scrollbar-thumb: rgba(255, 0, 0, 0.36);
  --ea-red-scrollbar-thumb-hover: rgba(255, 0, 0, 0.5);
  --ea-red-background-main: #020000;
}

body.theme-modern {
  color-scheme: light;
  --bg: var(--ea-light-bg);
  --bg-alt: #f3f3f3;
  --surface: var(--ea-light-surface-primary);
  --surface-alt: var(--ea-light-surface-secondary);
  --accent: var(--ea-accent-primary);
  --accent-strong: var(--ea-accent-strong);
  --accent-hover: var(--ea-accent-strong);
  --text: var(--ea-light-text);
  --text-muted: var(--ea-light-text-muted);
  --border: var(--ea-light-border-soft);
  --radius: var(--ea-radius-lg);
  --max-width: var(--ea-layout-max-width);
  --shadow: var(--ea-light-shadow-1);

  --color-app-background: var(--ea-light-bg);
  --color-app-background-main: var(--ea-light-bg);
  --color-surface-primary: var(--ea-light-surface-primary);
  --color-surface-secondary: var(--ea-light-surface-secondary);
  --color-surface-tertiary: var(--ea-light-surface-tertiary);
  --color-surface-muted: var(--ea-light-surface-muted);
  --color-surface-soft: var(--ea-light-surface-soft);
  --color-surface-contrast: var(--ea-light-surface-contrast);
  --color-surface-accent: var(--ea-light-surface-accent);
  --color-surface-alert: var(--ea-light-surface-alert);
  --color-surface-primary-transparent: var(--ea-light-surface-transparent);
  --color-text-primary: var(--ea-light-text);
  --color-text-muted: var(--ea-light-text-muted);
  --color-text-inverse: var(--ea-light-text-inverse);
  --color-accent-primary: var(--ea-accent-primary);
  --color-accent-strong: var(--ea-accent-strong);
  --color-border-soft: var(--ea-light-border-soft);
  --color-border-strong: var(--ea-light-border-strong);
  --button-border-color: var(--ea-light-button-border);
  --box-shadow-1: var(--ea-light-shadow-1);
  --box-shadow-2: var(--ea-light-shadow-2);
  --box-shadow-3: var(--ea-light-shadow-3);
  --box-shadow-4: var(--ea-light-shadow-4);
  --box-shadow-inset-1: inset 0 0 0 rgba(0, 0, 0, 0);
  --box-shadow-inset-2: inset 0 0 0 rgba(0, 0, 0, 0);
  --scrollbar-track-color: var(--ea-light-scrollbar-track);
  --scrollbar-thumb-color: var(--ea-light-scrollbar-thumb);
  --scrollbar-thumb-hover-color: var(--ea-light-scrollbar-thumb-hover);
  --background-main: #f8f8f8;
}

@media (prefers-color-scheme: dark) {
  body.theme-modern {
    color-scheme: dark;
    --bg: var(--ea-dark-bg);
    --bg-alt: var(--ea-dark-bg-alt);
    --surface: var(--ea-dark-surface-primary);
    --surface-alt: var(--ea-dark-surface-secondary);
    --accent: var(--ea-accent-primary);
    --accent-strong: var(--ea-accent-strong);
    --accent-hover: var(--ea-accent-strong);
    --text: var(--ea-dark-text);
    --text-muted: var(--ea-dark-text-muted);
    --border: var(--ea-dark-border-soft);
    --radius: var(--ea-radius-lg);
    --max-width: var(--ea-layout-max-width);
    --shadow: var(--ea-dark-shadow-marketing);

    --color-app-background: var(--ea-dark-bg);
    --color-app-background-main: var(--ea-dark-bg);
    --color-surface-primary: var(--ea-dark-surface-primary);
    --color-surface-secondary: var(--ea-dark-surface-secondary);
    --color-surface-tertiary: var(--ea-dark-surface-tertiary);
    --color-surface-muted: var(--ea-dark-surface-muted);
    --color-surface-soft: var(--ea-dark-surface-soft);
    --color-surface-contrast: var(--ea-dark-surface-contrast);
    --color-surface-accent: var(--ea-dark-surface-accent);
    --color-surface-alert: var(--ea-dark-surface-alert);
    --color-surface-primary-transparent: var(--ea-dark-surface-transparent);
    --color-text-primary: var(--ea-dark-text);
    --color-text-muted: var(--ea-dark-text-muted);
    --color-text-inverse: var(--ea-dark-text-inverse);
    --color-accent-primary: var(--ea-accent-primary);
    --color-accent-strong: var(--ea-accent-strong-dark);
    --color-border-soft: var(--ea-dark-border-soft);
    --color-border-strong: var(--ea-dark-border-strong);
    --button-border-color: var(--ea-dark-button-border);
    --box-shadow-1: var(--ea-dark-shadow-1);
    --box-shadow-2: var(--ea-dark-shadow-2);
    --box-shadow-3: var(--ea-dark-shadow-3);
    --box-shadow-4: var(--ea-dark-shadow-4);
    --box-shadow-inset-1: inset 0 0 0 rgba(0, 0, 0, 0);
    --box-shadow-inset-2: inset 0 0 0 rgba(0, 0, 0, 0);
    --scrollbar-track-color: var(--ea-dark-scrollbar-track);
    --scrollbar-thumb-color: var(--ea-dark-scrollbar-thumb);
    --scrollbar-thumb-hover-color: var(--ea-dark-scrollbar-thumb-hover);
    --background-main: var(--ea-dark-background-main);
  }
}

body.theme-modern-light {
  color-scheme: light;
  --bg: var(--ea-light-bg);
  --bg-alt: #f3f3f3;
  --surface: var(--ea-light-surface-primary);
  --surface-alt: var(--ea-light-surface-secondary);
  --accent: var(--ea-accent-primary);
  --accent-strong: var(--ea-accent-strong);
  --accent-hover: var(--ea-accent-strong);
  --text: var(--ea-light-text);
  --text-muted: var(--ea-light-text-muted);
  --border: var(--ea-light-border-soft);
  --radius: var(--ea-radius-lg);
  --max-width: var(--ea-layout-max-width);
  --shadow: var(--ea-light-shadow-1);

  --color-app-background: var(--ea-light-bg);
  --color-app-background-main: var(--ea-light-bg);
  --color-surface-primary: var(--ea-light-surface-primary);
  --color-surface-secondary: var(--ea-light-surface-secondary);
  --color-surface-tertiary: var(--ea-light-surface-tertiary);
  --color-surface-muted: var(--ea-light-surface-muted);
  --color-surface-soft: var(--ea-light-surface-soft);
  --color-surface-contrast: var(--ea-light-surface-contrast);
  --color-surface-accent: var(--ea-light-surface-accent);
  --color-surface-alert: var(--ea-light-surface-alert);
  --color-surface-primary-transparent: var(--ea-light-surface-transparent);
  --color-text-primary: var(--ea-light-text);
  --color-text-muted: var(--ea-light-text-muted);
  --color-text-inverse: var(--ea-light-text-inverse);
  --color-accent-primary: var(--ea-accent-primary);
  --color-accent-strong: var(--ea-accent-strong);
  --color-border-soft: var(--ea-light-border-soft);
  --color-border-strong: var(--ea-light-border-strong);
  --button-border-color: var(--ea-light-button-border);
  --box-shadow-1: var(--ea-light-shadow-1);
  --box-shadow-2: var(--ea-light-shadow-2);
  --box-shadow-3: var(--ea-light-shadow-3);
  --box-shadow-4: var(--ea-light-shadow-4);
  --box-shadow-inset-1: inset 0 0 0 rgba(0, 0, 0, 0);
  --box-shadow-inset-2: inset 0 0 0 rgba(0, 0, 0, 0);
  --scrollbar-track-color: var(--ea-light-scrollbar-track);
  --scrollbar-thumb-color: var(--ea-light-scrollbar-thumb);
  --scrollbar-thumb-hover-color: var(--ea-light-scrollbar-thumb-hover);
  --background-main: #f8f8f8;
}

body.theme-modern-dark {
  color-scheme: dark;
  --bg: var(--ea-dark-bg);
  --bg-alt: var(--ea-dark-bg-alt);
  --surface: var(--ea-dark-surface-primary);
  --surface-alt: var(--ea-dark-surface-secondary);
  --accent: var(--ea-accent-primary);
  --accent-strong: var(--ea-accent-strong);
  --accent-hover: var(--ea-accent-strong);
  --text: var(--ea-dark-text);
  --text-muted: var(--ea-dark-text-muted);
  --border: var(--ea-dark-border-soft);
  --radius: var(--ea-radius-lg);
  --max-width: var(--ea-layout-max-width);
  --shadow: var(--ea-dark-shadow-marketing);

  --color-app-background: var(--ea-dark-bg);
  --color-app-background-main: var(--ea-dark-bg);
  --color-surface-primary: var(--ea-dark-surface-primary);
  --color-surface-secondary: var(--ea-dark-surface-secondary);
  --color-surface-tertiary: var(--ea-dark-surface-tertiary);
  --color-surface-muted: var(--ea-dark-surface-muted);
  --color-surface-soft: var(--ea-dark-surface-soft);
  --color-surface-contrast: var(--ea-dark-surface-contrast);
  --color-surface-accent: var(--ea-dark-surface-accent);
  --color-surface-alert: var(--ea-dark-surface-alert);
  --color-surface-primary-transparent: var(--ea-dark-surface-transparent);
  --color-text-primary: var(--ea-dark-text);
  --color-text-muted: var(--ea-dark-text-muted);
  --color-text-inverse: var(--ea-dark-text-inverse);
  --color-accent-primary: var(--ea-accent-primary);
  --color-accent-strong: var(--ea-accent-strong-dark);
  --color-border-soft: var(--ea-dark-border-soft);
  --color-border-strong: var(--ea-dark-border-strong);
  --button-border-color: var(--ea-dark-button-border);
  --box-shadow-1: var(--ea-dark-shadow-1);
  --box-shadow-2: var(--ea-dark-shadow-2);
  --box-shadow-3: var(--ea-dark-shadow-3);
  --box-shadow-4: var(--ea-dark-shadow-4);
  --box-shadow-inset-1: inset 0 0 0 rgba(0, 0, 0, 0);
  --box-shadow-inset-2: inset 0 0 0 rgba(0, 0, 0, 0);
  --scrollbar-track-color: var(--ea-dark-scrollbar-track);
  --scrollbar-thumb-color: var(--ea-dark-scrollbar-thumb);
  --scrollbar-thumb-hover-color: var(--ea-dark-scrollbar-thumb-hover);
  --background-main: var(--ea-dark-background-main);
}

body.theme-modern-red-alert {
  color-scheme: dark;
  --bg: var(--ea-red-bg);
  --bg-alt: var(--ea-red-bg-alt);
  --surface: var(--ea-red-surface-primary);
  --surface-alt: var(--ea-red-surface-secondary);
  --accent: #b00000;
  --accent-strong: #d80000;
  --accent-hover: #ff0000;
  --text: var(--ea-red-text);
  --text-muted: var(--ea-red-text-muted);
  --border: var(--ea-red-border-soft);
  --radius: var(--ea-radius-lg);
  --max-width: var(--ea-layout-max-width);
  --shadow: var(--ea-red-shadow-marketing);

  --color-app-background: var(--ea-red-bg);
  --color-app-background-main: var(--ea-red-bg);
  --color-surface-primary: var(--ea-red-surface-primary);
  --color-surface-secondary: var(--ea-red-surface-secondary);
  --color-surface-tertiary: var(--ea-red-surface-tertiary);
  --color-surface-muted: var(--ea-red-surface-muted);
  --color-surface-soft: var(--ea-red-surface-soft);
  --color-surface-contrast: var(--ea-red-surface-contrast);
  --color-surface-accent: var(--ea-red-surface-accent);
  --color-surface-alert: var(--ea-red-surface-alert);
  --color-surface-primary-transparent: var(--ea-red-surface-transparent);
  --color-text-primary: var(--ea-red-text);
  --color-text-muted: var(--ea-red-text-muted);
  --color-text-inverse: var(--ea-red-text-inverse);
  --color-accent-primary: #d00000;
  --color-accent-strong: #ff0000;
  --color-border-soft: var(--ea-red-border-soft);
  --color-border-strong: var(--ea-red-border-strong);
  --button-border-color: var(--ea-red-button-border);
  --box-shadow-1: var(--ea-red-shadow-1);
  --box-shadow-2: var(--ea-red-shadow-2);
  --box-shadow-3: var(--ea-red-shadow-3);
  --box-shadow-4: var(--ea-red-shadow-4);
  --box-shadow-inset-1:
    inset 0 0 0 1px rgba(255, 0, 0, 0.26),
    inset 0 0 14px rgba(255, 0, 0, 0.08);
  --box-shadow-inset-2:
    inset 0 0 0 1px rgba(255, 0, 0, 0.2),
    inset 0 0 8px rgba(255, 0, 0, 0.06);
  --scrollbar-track-color: var(--ea-red-scrollbar-track);
  --scrollbar-thumb-color: var(--ea-red-scrollbar-thumb);
  --scrollbar-thumb-hover-color: var(--ea-red-scrollbar-thumb-hover);
  --background-main: var(--ea-red-background-main);
}

body.theme-classic {
  color-scheme: light;
}

body {
  font-family: var(--ea-font-sans);
}

body,
button,
input,
textarea,
select {
  font-family: var(--ea-font-sans);
}