:root {
  --brand-50: #FFF9EA;
  --brand-100: #F3E9D2;
  --brand-200: #E2D5B7;
  --brand-300: #B9CDB2;
  --brand-400: #71A36B;
  --brand-500: #2F6B45;
  --brand-600: #123322;
  --brand-700: #0D2418;
  --brand-800: #07110C;
  --brand-900: #040906;
  --brand: var(--brand-500);

  --bg: var(--brand-800);
  --surface: color-mix(in oklab, var(--brand-700) 88%, var(--brand-100));
  --surface-2: color-mix(in oklab, var(--brand-600) 82%, var(--brand-100));
  --surface-3: color-mix(in oklab, var(--brand-500) 74%, var(--brand-100));
  --border: color-mix(in oklab, var(--brand-300) 18%, transparent);
  --border-strong: color-mix(in oklab, var(--brand-300) 36%, transparent);
  --border-focus: var(--brand-300);
  --ink: var(--brand-50);
  --ink-2: color-mix(in oklab, var(--brand-50) 82%, var(--brand-300));
  --ink-muted: color-mix(in oklab, var(--brand-50) 58%, var(--brand-300));
  --ink-inverse: var(--brand-800);

  --success: #6FA56A;
  --success-ink: var(--brand-50);
  --warning: #D8A84E;
  --warning-ink: var(--brand-900);
  --danger: #B25A4A;
  --danger-ink: var(--brand-50);
  --info: #8FB8A0;
  --info-ink: var(--brand-900);

  --r-xs: 6px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-28: 112px;
  --s-32: 128px;

  --font-display: 'Fraunces', serif;
  --font-sans: 'Manrope', system-ui;
  --font-mono: 'JetBrains Mono', monospace;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;
  --fs-6xl: 88px;

  --lh-tight: 1;
  --lh-snug: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.04em;
  --tracking-normal: 0em;
  --tracking-wide: 0.12em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --shadow-xs: 0 1px 2px color-mix(in oklab, var(--brand-900) 20%, transparent);
  --shadow-sm: 0 8px 24px color-mix(in oklab, var(--brand-900) 18%, transparent);
  --shadow: 0 14px 40px color-mix(in oklab, var(--brand-900) 22%, transparent);
  --shadow-lg: 0 24px 64px color-mix(in oklab, var(--brand-900) 28%, transparent);
  --shadow-xl: 0 40px 96px color-mix(in oklab, var(--brand-900) 32%, transparent);
  --shadow-brand: 0 20px 60px color-mix(in oklab, var(--brand-500) 26%, transparent);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 380ms;
  --ring: 0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent);
}

[data-theme='light'] {
  --bg: var(--brand-50);
  --surface: color-mix(in oklab, var(--brand-100) 92%, white);
  --surface-2: color-mix(in oklab, var(--brand-100) 74%, white);
  --surface-3: color-mix(in oklab, var(--brand-300) 60%, white);
  --border: color-mix(in oklab, var(--brand-600) 14%, transparent);
  --border-strong: color-mix(in oklab, var(--brand-600) 24%, transparent);
  --border-focus: var(--brand-500);
  --ink: var(--brand-800);
  --ink-2: color-mix(in oklab, var(--brand-800) 82%, var(--brand-600));
  --ink-muted: color-mix(in oklab, var(--brand-800) 62%, var(--brand-500));
  --ink-inverse: var(--brand-50);
}