:root {
  --font-sans: "Segoe UI", "Inter", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.1rem;
  --radius-xl: 1.4rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28, 52, 87, 0.08);
  --shadow-md: 0 14px 30px rgba(28, 52, 87, 0.12);
  --shadow-lg: 0 24px 54px rgba(28, 52, 87, 0.16);

  --duration-fast: 160ms;
  --duration-medium: 220ms;
  --ease-standard: ease;

  --container-max: 1440px;
  --sidebar-width: 280px;

  --color-bg: #f4f8ff;
  --color-bg-soft: #eaf1fb;
  --color-surface: #ffffff;
  --color-surface-2: #f7faff;
  --color-surface-3: #eef3fb;
  --color-surface-contrast: #163047;
  --color-text: #17324a;
  --color-text-soft: #38506a;
  --color-text-muted: #60758d;
  --color-text-inverse: #f9fbff;
  --color-border: rgba(34, 72, 120, 0.12);
  --color-border-strong: rgba(34, 72, 120, 0.2);
  --color-link: #2f73bf;
  --color-link-hover: #1f5c9e;
  --color-primary: #3478c9;
  --color-primary-hover: #2c69b0;
  --color-primary-active: #255893;
  --color-secondary: #d7e2f2;
  --color-success: #2a7d59;
  --color-success-soft: rgba(42, 125, 89, 0.14);
  --color-warning: #ad6e11;
  --color-warning-soft: rgba(173, 110, 17, 0.14);
  --color-danger: #c23b43;
  --color-danger-soft: rgba(194, 59, 67, 0.15);
  --color-info: #306eaf;
  --color-info-soft: rgba(48, 110, 175, 0.14);

  --page-bg:
    radial-gradient(circle at top left, rgba(77, 133, 214, 0.18), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(194, 59, 67, 0.12), transparent 22%),
    radial-gradient(circle at 40% 100%, rgba(102, 154, 229, 0.12), transparent 30%),
    linear-gradient(150deg, #f4f8ff 0%, #ecf3fb 44%, #fdf3f4 100%);
  --page-orb-top: rgba(76, 135, 214, 0.22);
  --page-orb-bottom: rgba(194, 59, 67, 0.14);

  --surface-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(245, 249, 255, 0.78));
  --surface-panel-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 246, 255, 0.94));
  --surface-field: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 246, 255, 0.92));
  --surface-sidebar: linear-gradient(180deg, rgba(249, 252, 255, 0.95), rgba(233, 241, 251, 0.93));
  --surface-sidebar-group: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(235, 242, 252, 0.74));
  --surface-overlay: rgba(255, 255, 255, 0.62);
  --surface-code: linear-gradient(180deg, rgba(19, 30, 43, 0.92), rgba(14, 24, 36, 0.94));

  --text-strong: var(--color-text);
  --text-soft: rgba(23, 50, 74, 0.78);
  --text-muted: rgba(23, 50, 74, 0.62);
  --text-faint: rgba(23, 50, 74, 0.5);

  --focus-ring: 0 0 0 3px rgba(52, 120, 201, 0.22);
  --focus-outline-color: rgba(52, 120, 201, 0.5);

  --panel-border: var(--color-border);
  --panel-border-strong: var(--color-border-strong);
  --panel-shadow: var(--shadow-lg);
  --panel-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  --field-border: rgba(34, 72, 120, 0.14);
  --field-border-focus: rgba(52, 120, 201, 0.36);
  --field-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);

  --button-primary-bg: linear-gradient(180deg, #4789d8, #3478c9);
  --button-primary-bg-hover: linear-gradient(180deg, #5796e3, #2c69b0);
  --button-primary-border: rgba(52, 120, 201, 0.56);
  --button-primary-text: #f9fbff;
  --button-secondary-bg: var(--surface-field);
  --button-secondary-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(236, 244, 255, 0.95));
  --button-secondary-border: var(--field-border);
  --button-secondary-text: var(--text-strong);

  --nav-item-bg-hover: linear-gradient(180deg, rgba(52, 120, 201, 0.14), rgba(194, 59, 67, 0.05));
  --nav-item-bg-active: linear-gradient(180deg, rgba(52, 120, 201, 0.18), rgba(194, 59, 67, 0.08));
  --nav-item-border-active: rgba(52, 120, 201, 0.28);

  --status-success: var(--color-success);
  --status-success-soft: var(--color-success-soft);
  --status-warning: var(--color-warning);
  --status-warning-soft: var(--color-warning-soft);
  --status-danger: var(--color-danger);
  --status-danger-soft: var(--color-danger-soft);
  --status-info: var(--color-info);
  --status-info-soft: var(--color-info-soft);

  --backdrop-color: rgba(18, 34, 56, 0.38);
}