:root {
  --x5-green-50: #f1f9ec;
  --x5-green-100: #ddf0cf;
  --x5-green-200: #c0e3a5;
  --x5-green-300: #9fd378;
  --x5-green-400: #7dc24f;
  --x5-green-500: #5faf2d;
  --x5-green-600: #4a8a23;
  --x5-green-700: #3a6c1b;
  --x5-green-800: #2b5014;
  --x5-green-900: #1b3a0e;

  --ink-900: #222626;
  --ink-700: #3a403e;
  --ink-500: #5c635f;
  --ink-400: #6a716c;
  --ink-300: #a8aeaa;

  --surface: #ffffff;
  --canvas: #f7f8f7;
  --canvas-sunk: #eef1ee;
  --border: #dde2dc;
  --border-strong: #c4ccc2;

  --error-600: #d92d20;
  --error-700: #912018;
  --error-50: #fef3f2;
  --warning-600: #dc6803;
  --warning-700: #93370d;
  --warning-50: #fffaeb;
  --success-600: #0e9384;
  --success-700: #0b6b60;
  --success-50: #f0fdf9;
  --info-600: #0b7bc1;
  --info-700: #0b4f7e;
  --info-50: #eff8ff;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  --sh-sm: 0 1px 2px rgba(34, 38, 38, 0.04), 0 4px 12px -4px rgba(34, 38, 38, 0.08);
  --sh-lg: 0 2px 4px rgba(34, 38, 38, 0.04), 0 24px 56px -12px rgba(34, 38, 38, 0.18);

  --ring: 0 0 0 3px rgba(95, 175, 45, 0.22);

  --link: var(--x5-green-700);
  --btn-primary-bg: var(--ink-900);
  --btn-primary-fg: #ffffff;
  --btn-primary-bg-hover: #333937;
  --btn-primary-bg-active: #131615;

  --card-bg: rgba(255, 255, 255, 0.94);
  --card-border: rgba(255, 255, 255, 0.6);
  --scrim: linear-gradient(
    115deg,
    rgba(10, 26, 6, 0.72) 0%,
    rgba(10, 26, 6, 0.3) 52%,
    rgba(10, 26, 6, 0.55) 100%
  );

  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink-900: #ecefec;
  --ink-700: #d2d7d3;
  --ink-500: #a3aaa5;
  --ink-400: #868e89;
  --ink-300: #6a716c;

  --surface: #171b19;
  --canvas: #0f1210;
  --canvas-sunk: #1f2422;
  --border: #2c332f;
  --border-strong: #3d453f;

  --error-600: #f97066;
  --error-700: #fda29b;
  --error-50: #2a1512;
  --warning-600: #fdb022;
  --warning-700: #fec84b;
  --warning-50: #2a1b0a;
  --success-600: #2ed3b7;
  --success-700: #5fe9d0;
  --success-50: #0c2420;
  --info-600: #53b1fd;
  --info-700: #84caff;
  --info-50: #0e2233;

  --link: var(--x5-green-400);
  --btn-primary-bg: #ecefec;
  --btn-primary-fg: #10130f;
  --btn-primary-bg-hover: #ffffff;
  --btn-primary-bg-active: #c9cec9;

  --card-bg: rgba(23, 27, 25, 0.92);
  --card-border: rgba(255, 255, 255, 0.08);
  --scrim: linear-gradient(
    115deg,
    rgba(4, 10, 3, 0.88) 0%,
    rgba(4, 10, 3, 0.68) 52%,
    rgba(4, 10, 3, 0.82) 100%
  );

  --sh-lg: 0 2px 4px rgba(0, 0, 0, 0.3), 0 24px 56px -12px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(125, 194, 79, 0.3);

  color-scheme: dark;
}