:root{
  /* ===== Brand Core ===== */
  --gb-green-900: 17 107 58;   /* #116B3A */
  --gb-green-800: 30 106 67;   /* #1E6A43 */
  --gb-green-700: 16 131 60;   /* #10833C */
  --gb-green-600: 23 133 69;   /* #178545 */

  --gb-lime-500: 148 195 72;   /* #94C348 */
  --gb-lime-400: 151 187 86;   /* #97BB56 */

  --gb-green-200: 166 206 165; /* #A6CEA5 */
  --gb-green-100: 216 235 221; /* #D8EBDD */
  --gb-green-050: 237 252 240; /* #EDFCF0 */

  --gb-white: 255 255 255;
  --gb-gray-900: 17 24 39;
  --gb-gray-700: 55 65 81;
  --gb-gray-500: 107 114 128;
  --gb-gray-300: 209 213 219;
  --gb-gray-200: 229 231 235;
  --gb-gray-100: 243 244 246;

  /* ===== Semantic ===== */
  --text-primary: var(--gb-gray-900);
  --text-secondary: var(--gb-gray-700);
  --text-muted: var(--gb-gray-500);
  --text-inverse: var(--gb-white);

  --bg-page: var(--gb-gray-100);
  --bg-surface: var(--gb-white);
  --bg-soft: var(--gb-green-050);

  --border-default: var(--gb-gray-200);
  --border-strong: var(--gb-gray-300);
  --border-brand: var(--gb-green-700);

  --brand-primary: var(--gb-green-900);
  --brand-primary-hover: var(--gb-green-800);
  --brand-accent: var(--gb-lime-500);
}

html, body{
  background: rgb(var(--bg-page));
  color: rgb(var(--text-primary));
}