:root {
  /* --- Base Colors --- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f6f8fa;
  --color-gray-100: #f0f2f6;
  --color-gray-200: #e0e0e0;
  --color-gray-300: #d0d7de;
  --color-gray-400: #9aa0a6;
  --color-gray-500: #8b949e;
  --color-gray-600: #57606a;
  --color-gray-800: #24292f;
  --color-gray-900: #0d1117;

  /* --- Brand Colors --- */
  --color-primary: #ff4b4b;
  --color-primary-hover: #e63e3e;

  /* --- Semantic Colors --- */
  --color-success: #2da44e;
  --color-success-hover: #2c974b;
  --color-warning: #bf8700;
  --color-danger: #d93025;
  --color-info: #0969da;

  /* --- Theme: Light (Default) --- */
  --bg-main: var(--color-white);
  --bg-sidebar: var(--color-gray-100);
  --bg-card: var(--color-white);
  --bg-hover: var(--color-gray-50);

  --fg-main: var(--color-gray-900);
  --fg-muted: var(--color-gray-600);
  --fg-on-primary: var(--color-white);

  --border-default: var(--color-gray-300);
  --border-subtle: rgba(27, 31, 36, 0.15);
  --bg-surface-subtle: rgba(0, 0, 0, 0.03);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* --- Spacing & Layout --- */
  --spacing-unit: 8px;
  --page-padding: 24px;
  --sidebar-padding: 20px;
  --card-padding: 16px;
  --header-height: 60px;

  /* --- Components --- */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-fg: var(--color-white);
  --btn-secondary-bg: transparent;
  --btn-secondary-border: var(--fg-muted);

  --input-bg: var(--bg-main);
  --input-border: var(--border-default);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

[data-theme='dark'] {
  /* --- Theme: Dark --- */
  --bg-main: #0d1117;
  --bg-sidebar: #161b22;
  --bg-card: #0d1117;
  --bg-hover: #21262d;

  --fg-main: #c9d1d9;
  --fg-muted: #8b949e;

  --border-default: #30363d;
  --border-subtle: rgba(240, 246, 252, 0.1);
  --bg-surface-subtle: rgba(255, 255, 255, 0.04);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.4);

  --input-bg: #0d1117;
}

/* --- Backward Compatibility Aliases --- */
:root {
  --card-border: var(--border-default);
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-white);
  --highlight: var(--color-primary);
  --muted: var(--fg-muted);
  --shadow: var(--shadow-sm);
  --hover-bg: var(--bg-hover);
}