/* CSS custom properties / design tokens */
:root {
  /* Brand */
  --color-primary: #e5322d;
  --color-primary-dark: #c22622;
  --color-primary-light: #fdeceb;

  /* Neutrals (light theme, default) */
  --color-text: #1a1a2e;
  --color-text-muted: #555770;
  --color-border: rgba(0,0,0,.07);
  --color-bg: #f5f6f8;
  --color-bg-soft: #ffffff;
  --color-surface: #ffffff;
  --color-overlay: rgba(17, 20, 26, 0.45);

  /* Category / card accents */
  --color-organize: #2f80ed;
  --color-optimize: #27ae60;
  --color-convert: #9b51e0;
  --color-edit: #f2994a;
  --color-security: #eb5757;

  --red: #e8343a;
  --red-dark: #c0282d;
  --red-light: #fff0f0;
  --blue: #1976d2;
  --blue-light: #e8f2fd;
  --orange: #f57c00;
  --orange-light: #fff3e0;
  --green: #2e7d32;
  --green-light: #e8f5e9;
  --purple: #6a1b9a;
  --purple-light: #f3e5f5;
  --teal: #00695c;
  --teal-light: #e0f2f1;
  --indigo: #283593;
  --indigo-light: #e8eaf6;
  --pink: #ad1457;
  --pink-light: #fce4ec;
  --amber: #ff8f00;
  --amber-light: #fff8e1;
  --cyan: #00838f;
  --cyan-light: #e0f7fa;
  --brown: #4e342e;
  --brown-light: #efebe9;
  --violet: #5e35b1;
  --violet-light: #ede7f6;

  /* Layout */
  --header-height: 68px;
  --container-max: 1500px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 6px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.13);

  /* Type — system stack only (PageSpeed: zero font requests) */
  --font-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 220ms cubic-bezier(.22,1,.36,1);
}

:root[data-theme="dark"] {
  --color-text: #edeef2;
  --color-text-muted: #9aa0ac;
  --color-border: #2c303a;
  --color-bg: #14161c;
  --color-bg-soft: #1c1f27;
  --color-surface: #1c1f27;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-primary-light: #2a1414;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  --red-light: #2a1414;
  --blue-light: #0d1f33;
  --orange-light: #2a1c08;
  --green-light: #0d1f12;
  --purple-light: #1a0f22;
  --teal-light: #0a1c1a;
  --indigo-light: #10122a;
  --pink-light: #241018;
  --amber-light: #2a2008;
  --cyan-light: #0a1c1e;
  --brown-light: #1c1614;
  --violet-light: #161022;
}

html[data-theme] body,
html[data-theme] .site-header,
html[data-theme] .mega-menu,
html[data-theme] .mobile-menu {
  transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}