:root {
  /* Brand / semantic colors */
  --color-primary: #e30613;
  --color-primary-hover: #c30511;
  --color-primary-soft: #fde8ea;
  --color-primary-subtle: #fff4f5;

  --color-bg-page: #f5f6f8;
  --color-bg-surface: #ffffff;
  --color-bg-surface-alt: #f9fafb;
  --color-bg-sidebar: #111827;
  --color-bg-header: #ffffff;

  --color-text-main: #111827;
  --color-text-muted: #4b5563;
  --color-text-soft: #9ca3af;
  --color-text-inverse: #ffffff;

  --color-border-default: #e5e7eb;
  --color-border-strong: #d1d5db;

  --color-success: #0f766e;
  --color-success-soft: #e6f8f6;
  --color-warning: #b45309;
  --color-warning-soft: #fff6e6;
  --color-danger: #b91c1c;
  --color-danger-soft: #fdecec;
  --color-info: #1d4ed8;
  --color-info-soft: #e8f0ff;

  --color-sidebar-border: rgba(255, 255, 255, 0.08);
  --color-sidebar-hover: rgba(255, 255, 255, 0.06);
  --color-sidebar-text: rgba(255, 255, 255, 0.85);
  --color-sidebar-text-soft: rgba(255, 255, 255, 0.8);
  --color-sidebar-active-bg: rgba(227, 6, 19, 0.16);
  --color-sidebar-active-border: rgba(227, 6, 19, 0.46);
  --color-sidebar-active-child: rgba(227, 6, 19, 0.2);
  --color-overlay: rgba(17, 24, 39, 0.4);

  /* Typography — P-084.UI-FIX: Density normalization */
  --font-family-base: "Inter", "Segoe UI", Arial, sans-serif;
  --font-size-page-title: 20px;       /* 24px → 20px */
  --font-size-section-title: 16px;    /* 18px → 16px */
  --font-size-card-title: 15px;       /* 16px → 15px */
  --font-size-body: 14px;
  --font-size-muted: 13px;
  --font-size-label: 13px;            /* 12px → 13px */
  --font-size-table-head: 13px;       /* 12px → 13px */
  --font-size-table-body: 13px;       /* New: tbody density */

  /* Spacing */
  --space-page: 24px;
  --space-card: 16px;
  --space-card-lg: 20px;
  --space-section: 24px;
  --space-stack-sm: 12px;
  --space-stack-md: 16px;
  --space-form-gap: 14px;
  --space-table-y: 12px;
  --space-table-x: 16px;

  /* Radius */
  --radius-button: 8px;
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-badge: 999px;
  --radius-modal: 14px;

  /* Size */
  --size-input-h: 40px;
  --size-button-h: 38px;
  --size-table-row: 48px;
  --size-sidebar-w: 260px;
  --size-header-h: 64px;

  /* Shadow */
  --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.06);
}

[data-theme="dark"] {
  --color-bg-page: #0f172a;
  --color-bg-surface: #111827;
  --color-bg-surface-alt: #1f2937;
  --color-bg-header: #111827;
  --color-text-main: #e5e7eb;
  --color-text-muted: #9ca3af;
  --color-text-soft: #6b7280;
  --color-border-default: #374151;
  --color-border-strong: #4b5563;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
}