/* SuperTotem — Color tokens
   Base palette is fixed brand color; neutrals derived in oklch for consistent
   perceptual steps. Semantic aliases are what components/screens should use. */

:root {
  /* ---- Brand base ---- */
  --brand-green-900: #1e3818; /* deep shade, derived from #2a4d21 */
  --brand-green-800: #2a4d21; /* dark green — given */
  --brand-green-700: #366530;
  --brand-green-600: #477d38; /* primary green — given */
  --brand-green-500: #5a9645;
  --brand-green-400: #6fb12d; /* bright green — given */
  --brand-green-300: #8fc95a;
  --brand-green-200: #bfe29c;
  --brand-green-100: #e3f3d6;
  --brand-green-50:  #f3faed;

  --brand-yellow-600: #d99e10;
  --brand-yellow-500: #fcbd30; /* yellow — given */
  --brand-yellow-400: #fdcc5c;
  --brand-yellow-300: #fedb87;
  --brand-yellow-200: #feeab3;
  --brand-yellow-100: #fef6dc;

  /* ---- Neutrals (derived in oklch from black / #868685 / white) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  oklch(97.5% 0.001 90);
  --neutral-100: oklch(94.5% 0.002 90);
  --neutral-200: oklch(89% 0.003 90);
  --neutral-300: oklch(80% 0.003 90);
  --neutral-400: oklch(69% 0.004 90); /* ~#868685 */
  --neutral-500: oklch(58% 0.004 90);
  --neutral-600: oklch(46% 0.004 90);
  --neutral-700: oklch(34% 0.003 90);
  --neutral-800: oklch(22% 0.002 90);
  --neutral-900: oklch(12% 0 0);
  --neutral-950: #000000;

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--neutral-0);
  --surface-page-alt: var(--brand-green-50);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-inverse: var(--brand-green-900);
  --surface-overlay: color-mix(in oklch, var(--neutral-950) 55%, transparent);

  /* ---- Semantic: text ---- */
  --text-primary: var(--neutral-950);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-400);
  --text-on-brand: var(--neutral-0);
  --text-on-yellow: var(--brand-green-900);
  --text-link: var(--brand-green-700);

  /* ---- Semantic: brand roles ---- */
  --brand-primary: var(--brand-green-600);
  --brand-primary-hover: var(--brand-green-700);
  --brand-primary-active: var(--brand-green-800);
  --brand-accent: var(--brand-yellow-500);
  --brand-accent-hover: var(--brand-yellow-600);
  --brand-energy: var(--brand-green-400); /* "charged" / success-adjacent highlight */

  /* ---- Semantic: borders ---- */
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-950);
  --border-brand: var(--brand-green-600);

  /* ---- Semantic: state ---- */
  --state-success: var(--brand-green-600);
  --state-warning: var(--brand-yellow-500);
  --state-danger: #c23b2e;
  --state-info: var(--neutral-600);
  --focus-ring: var(--brand-green-400);
}