:root {
  --color-base-white: #ffffff;
  --color-base-black: #000000;
  --color-primary-900: #0c160f;
  --color-primary-800: #192d1e;
  --color-primary-700: #25432d;
  --color-primary-600: #325a3c;
  --color-primary-500: #3e704b;
  --color-primary-400: #638b6d;
  --color-primary-300: #87a58f;
  --color-primary-200: #acc0b1;
  --color-primary-100: #d0dad3;

  --color-hunter-900: #0f100f;
  --color-hunter-800: #1e201f;
  --color-hunter-700: #2d312e;
  --color-hunter-600: #3c413e;
  --color-hunter-500: #4b514d;
  --color-hunter-400: #6d726f;
  --color-hunter-300: #8f9390;
  --color-hunter-200: #b1b3b2;
  --color-hunter-100: #d3d4d3;

  --color-brown-900: #2a241e;
  --color-brown-800: #54483d;
  --color-brown-700: #7d6b5b;
  --color-brown-600: #a78f7a;
  --color-brown-500: #d1b398;
  --color-brown-400: #d8c0ab;
  --color-brown-300: #dfcdbd;
  --color-brown-200: #e7dbd0;
  --color-brown-100: #f5f2ed;
  --color-brown-50: #fffdf7;

  --color-neutral-900: #202327;
  --color-neutral-800: #40464d;
  --color-neutral-700: #606874;
  --color-neutral-600: #808b9a;
  --color-neutral-500: #a0aec1;
  --color-neutral-400: #b1bccb;
  --color-neutral-300: #c2cad6;
  --color-neutral-200: #d3d9e0;
  --color-neutral-100: #e4e7eb;
  --color-neutral-50: #f8fafc;

  --color-yellow-900: #64551f;
  --color-yellow-800: #967f2f;
  --color-yellow-700: #e4bc29;
  --color-yellow-600: #edc94a;
  --color-yellow-500: #fad44e;
  --color-yellow-400: #fbdd71;
  --color-yellow-300: #fce595;
  --color-yellow-200: #fdeeb8;
  --color-yellow-100: #fef6dc;
  --color-yellow-50: #fefbed;

  --color-gold-900: #332510;
  --color-gold-800: #664b21;
  --color-gold-700: #997031;
  --color-gold-600: #cc9642;
  --color-gold-500: #ffbb52;
  --color-gold-400: #ffc975;
  --color-gold-300: #ffd697;
  --color-gold-200: #ffe4ba;
  --color-gold-100: #fff1dc;
  --color-gold-50: #fff8ed;

  --color-accent-900: #2d0d02;
  --color-accent-800: #5a1b05;
  --color-accent-700: #882807;
  --color-accent-600: #b5360a;
  --color-accent-500: #e2430c;
  --color-accent-400: #e8693d;
  --color-accent-300: #ee8e6d;
  --color-accent-200: #f3b49e;
  --color-accent-100: #f9d9ce;
  --color-accent-50: #fcece6;

  --color-success-900: #0f2204;
  --color-success-800: #1f4309;
  --color-success-700: #2e650d;
  --color-success-600: #3e8612;
  --color-success-500: #4da816;
  --color-success-400: #71b945;
  --color-success-300: #94cb73;
  --color-success-200: #b8dca2;
  --color-success-100: #dbeed0;
  --color-success-50: #edf6e8;

  --color-error-900: #2c0808;
  --color-error-800: #580f0f;
  --color-error-700: #841717;
  --color-error-600: #b01e1e;
  --color-error-500: #dc2626;
  --color-error-400: #e35151;
  --color-error-300: #ea7d7d;
  --color-error-200: #f1a8a8;
  --color-error-100: #f8d4d4;
  --color-error-50: #fbe9e9;

  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-headings: var(--color-neutral-900);
  --text-action: var(--color-neutral-900);
  --text-action-hover: var(--color-neutral-600);
  --text-on-disabled: var(--color-neutral-300);
  --text-disabled: var(--color-neutral-300);
  --text-success: var(--color-success-500);
  --text-error: var(--color-error-500);
  --text-warning: var(--color-yellow-500);
  --text-on-action: var(--color-base-white);

  --surface-page: var(--color-base-white);
  --surface-subtle: var(--color-brown-50);
  --surface-success: var(--color-success-50);
  --surface-warning: var(--color-yellow-200);
  --surface-error: var(--color-error-100);
  --surface-disabled: var(--color-primary-200);
  --surface-disabled-2: var(--color-neutral-50);
  --surface-action: var(--color-primary-500);
  --surface-action-2: var(--color-yellow-500);
  --surface-action-hover: var(--color-primary-700);
  --surface-action-2-hover: var(--color-yellow-600);
  --surface-action-hover-outline: var(--color-primary-500);
  --surface-action-3: var(--surface-page);
  --surface-action-3-hover: var(--color-neutral-50);

  --border-primary: var(--color-neutral-200);
  --border-secondary: var(--color-base-black);
  --border-success: var(--color-success-50);
  --border-warning: var(--color-yellow-200);
  --border-error: var(--color-error-300);
  --border-disabled: var(--color-neutral-300);
  --border-disabled-2: var(--color-neutral-100);
  --border-action: var(--color-primary-500);
  --border-action-hover: var(--color-primary-700);
  --border-focus: var(--color-primary-500);

  --icon-primary: var(--color-neutral-900);
  --icon-secondary: var(--color-neutral-600);
  --icon-success: var(--color-success-500);
  --icon-warning: var(--color-yellow-500);
  --icon-error: var(--color-error-500);
  --icon-action: var(--color-primary-500);
  --icon-action-hover: var(--color-primary-700);
  --icon-on-action: var(--color-base-white);
  --icon-on-disabled: var(--color-neutral-300);

  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --spacing-64: 256px;

  --shadow-blur-2xs: 4px;
  --shadow-blur-xs: 8px;
  --shadow-blur-sm: 12px;
  --shadow-blur-md: 16px;
  --shadow-blur-lg: 24px;
  --shadow-blur-xl: 48px;
  --shadow-blur-2xl: 64px;

  --shadow-spread-xs: -4px;
  --shadow-spread-sm: -8px;
  --shadow-spread-md: -12px;
  --shadow-spread-lg: -16px;
  --shadow-spread-xl: -24px;
  --shadow-spread-2xl: -32px;

  --shadow-xs: 0px var(--spacing-1) var(--shadow-blur-2xs) 0px
    rgba(0, 0, 0, 0.05);
  --shadow-sm: 0px var(--spacing-1) var(--shadow-blur-2xs) 0px
    rgba(17, 17, 17, 0.1);
  --shadow-md: 0px var(--spacing-1) var(--shadow-blur-xs) 0px
    rgba(17, 17, 17, 0.1);
  --shadow-lg: 0px var(--spacing-3) var(--shadow-blur-md)
    var(--shadow-spread-xs) var(--color-brown-100);
  --shadow-xl: 0px var(--spacing-5) var(--shadow-blur-lg)
    var(--shadow-spread-xs) rgba(17, 17, 17, 0.1);
  --shadow-2xl: 0px var(--spacing-6) var(--shadow-blur-xl)
    var(--shadow-spread-md) var(--color-brown-200);
  --shadow-3xl: 0px var(--spacing-8) var(--shadow-blur-2xl)
    var(--shadow-spread-md) rgba(17, 17, 17, 0.1);
}