:root {
  color-scheme: light;

  /* Primitive */
  --color-ink-950: #102033;
  --color-ink-900: #16304a;
  --color-ink-800: #244461;
  --color-slate-700: #5f7287;
  --color-slate-600: #72869a;
  --color-slate-500: #889aac;
  --color-slate-300: #d7e0e9;
  --color-slate-200: #e6edf3;
  --color-slate-100: #f4f7fb;
  --color-slate-50: #f8fafc;
  --color-white: #ffffff;

  --color-green-700: #125f40;
  --color-green-600: #177a53;
  --color-green-500: #1e8b61;
  --color-green-100: #e8f4ef;

  --color-brass-600: #c5a351;
  --color-brass-100: #efe6ca;

  --color-danger-600: #bf4c3f;
  --color-danger-100: #f9e8e5;
  --color-warning-600: #b7791f;
  --color-warning-100: #f8eedb;
  --color-info-600: #2c6aa0;
  --color-info-100: #e6eff7;

  /* Typography */
  --font-sans: "Sora", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.875rem;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radius */
  --radius-sm: 0.75rem;
  --radius-md: 0.9375rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* Semantic */
  --surface-base: var(--color-slate-100);
  --surface-panel: var(--color-white);
  --surface-muted: var(--color-slate-50);
  --surface-strong: #0f2234;

  --text-primary: var(--color-ink-950);
  --text-secondary: var(--color-slate-700);
  --text-muted: var(--color-slate-600);
  --text-on-strong: var(--color-white);

  --border-subtle: var(--color-slate-200);
  --border-default: var(--color-slate-300);
  --border-strong: #bfd0de;

  --action-primary: var(--color-green-600);
  --action-primary-hover: var(--color-green-700);
  --action-secondary: var(--color-ink-900);
  --action-secondary-hover: var(--color-ink-800);
  --accent: var(--color-brass-600);
  --accent-soft: var(--color-brass-100);

  --success: var(--color-green-600);
  --success-soft: var(--color-green-100);
  --warning: var(--color-warning-600);
  --warning-soft: var(--color-warning-100);
  --danger: var(--color-danger-600);
  --danger-soft: var(--color-danger-100);
  --info: var(--color-info-600);
  --info-soft: var(--color-info-100);

  /* Component */
  --shell-bg:
    radial-gradient(circle at top left, rgba(197, 163, 81, 0.08), transparent 26%),
    linear-gradient(180deg, #f5f8fb 0%, #edf2f7 100%);
  --sidebar-bg: linear-gradient(180deg, #173552 0%, #0f2438 100%);
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-text: rgba(255, 255, 255, 0.84);
  --sidebar-text-muted: rgba(255, 255, 255, 0.58);
  --sidebar-active-bg: rgba(255, 255, 255, 0.12);
  --sidebar-active-text: #f8fbff;

  --card-bg: var(--surface-panel);
  --card-border: rgba(16, 32, 51, 0.08);
  --card-shadow: 0 20px 44px rgba(16, 32, 51, 0.06);
  --card-shadow-hover: 0 24px 52px rgba(16, 32, 51, 0.09);

  --topbar-bg: rgba(255, 255, 255, 0.84);
  --topbar-border: rgba(16, 32, 51, 0.08);

  --control-bg: #fbfdff;
  --control-border: var(--border-default);
  --control-border-focus: rgba(23, 122, 83, 0.42);
  --control-shadow-focus: 0 0 0 4px rgba(23, 122, 83, 0.12);
  --control-height: 2.875rem;

  --table-head-bg: #f3f7fa;
  --table-row-hover: #f8fbfd;

  --shadow-soft: 0 10px 26px rgba(16, 32, 51, 0.08);
  --shadow-focus: 0 0 0 4px rgba(23, 122, 83, 0.14);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::selection {
  background: rgba(23, 122, 83, 0.18);
  color: var(--text-primary);
}

a,
button,
input,
select,
textarea {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}