:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
               Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;

  /* Radius & borders */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --border-width: 1px;

  /* Layout */
  --layout-max-width: 1080px;
}

:root,
:root[data-theme="light"] {
  /* Colors - neutral base */
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-border: #e2e5ea;
  --color-text: #1a1f2b;
  --color-text-muted: #6b7280;

  /* Accent: vibrant flat blue */
  --color-primary: #3661c7;
  --color-primary-hover: #2a4ea8;

  /* Semantic */
  --color-success: #2f7d4c;
  --color-warning: #a86b00;
  --color-danger: #b23a3a;
  --color-info: #3661c7;

  /* Semantic tints */
  --color-primary-tint: rgba(54, 97, 199, 0.10);
  --color-primary-border: rgba(54, 97, 199, 0.35);
  --color-primary-soft: rgba(54, 97, 199, 0.05);
  --color-success-tint: rgba(47, 125, 76, 0.08);
  --color-success-border: rgba(47, 125, 76, 0.3);
  --color-warning-tint: rgba(168, 107, 0, 0.08);
  --color-warning-border: rgba(168, 107, 0, 0.3);
  --color-warning-soft: rgba(168, 107, 0, 0.05);
  --color-danger-tint: rgba(178, 58, 58, 0.08);
  --color-danger-border: rgba(178, 58, 58, 0.3);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.12);
  --shadow-modal: 0 20px 60px rgba(15, 23, 42, 0.25);
}

:root[data-theme="dark"] {
  --color-bg: #0f1419;
  --color-surface: #1a1f28;
  --color-border: #2a3340;
  --color-text: #e5e7eb;
  --color-text-muted: #9ca3af;

  --color-primary: #7aaeea;
  --color-primary-hover: #9bc2f0;

  --color-success: #5cba7f;
  --color-warning: #d4a04a;
  --color-danger: #e07878;
  --color-info: #7aaeea;

  --color-primary-tint: rgba(122, 174, 234, 0.14);
  --color-primary-border: rgba(122, 174, 234, 0.40);
  --color-primary-soft: rgba(122, 174, 234, 0.07);
  --color-success-tint: rgba(92, 186, 127, 0.12);
  --color-success-border: rgba(92, 186, 127, 0.35);
  --color-warning-tint: rgba(212, 160, 74, 0.14);
  --color-warning-border: rgba(212, 160, 74, 0.35);
  --color-warning-soft: rgba(212, 160, 74, 0.08);
  --color-danger-tint: rgba(224, 120, 120, 0.14);
  --color-danger-border: rgba(224, 120, 120, 0.35);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.7);
}