:root {
	/* Neutral Palette */
	--color-neutral-10: #f9f9f9;
	--color-neutral-20: #e0e0e0;
	--color-neutral-30: #c2c2c2;
	--color-neutral-40: #a6a6a6;
	--color-neutral-50: #8a8a8a;
	--color-neutral-60: #6d6d6d;
	--color-neutral-70: #555;
	--color-neutral-80: #3c3c3c;
	--color-neutral-90: #2b2b2b;
	--color-neutral-100: #1a1a1a;

	/* Teal Palette */
	--color-teal-10: #e0f2f1;
	--color-teal-20: #c2e2e0;
	--color-teal-30: #a4d2d0;
	--color-teal-40: #84bfbb;
	--color-teal-50: #66aeab;
	--color-teal-60: #519797;
	--color-teal-70: #3f7f80;
	--color-teal-80: #30696a;
	--color-teal-90: #1f5758;
	--color-teal-100: #01555e;

	/* Orange Palette */
	--color-orange-10: #fff8eb;
	--color-orange-20: #ffeecf;
	--color-orange-30: #ffe199;
	--color-orange-40: #ffd27a;
	--color-orange-50: #ffc247;
	--color-orange-60: #f9b03b;
	--color-orange-70: #f5a72b;
	--color-orange-80: #f2a222;
	--color-orange-90: #e28f1a;
	--color-orange-100: #cc7d12;

	/* Yellow Palette */
	--color-yellow-10: #fffbeb;
	--color-yellow-20: #fff6cc;
	--color-yellow-30: #ffefa3;
	--color-yellow-40: #ffea88;
	--color-yellow-50: #ffe46b;
	--color-yellow-60: #ffda45;
	--color-yellow-70: #f5d000;
	--color-yellow-80: #eeca00;
	--color-yellow-90: #dab900;
	--color-yellow-100: #c2a504;

	/* Red Palette */
	--color-red-10: #fff4f3;
	--color-red-20: #ffe4e1;
	--color-red-30: #ffd2cc;
	--color-red-40: #f29a8f;
	--color-red-50: #ec7a6e;
	--color-red-60: #e64c3c;
	--color-red-70: #d94333;
	--color-red-80: #cc3a2c;
	--color-red-90: #c03428;
	--color-red-100: #b73226;

	/* Green Palette */
	--color-green-10: #f1fbf1;
	--color-green-20: #e0f7e1;
	--color-green-30: #c7eec8;
	--color-green-40: #9edfa1;
	--color-green-50: #74c977;
	--color-green-60: #4caf50;
	--color-green-70: #469e49;
	--color-green-80: #3b8c3e;
	--color-green-90: #347a37;
	--color-green-100: #2e7d32;

	/* SEMANTIC COLORS */
	--color-bg-body: var(--color-neutral-10);
	--color-main: var(--color-teal-40);
	--color-surface: #fff;
	--color-accent: var(--color-orange-50);
	--color-text-light: var(--color-neutral-10);
	--color-text-dark: var(--color-neutral-100);
	--color-border-neutral: var(--color-neutral-30);
	--color-border-orange: var(--color-accent);
	--color-border-teal: var(--color-main);
	--color-error-light: var(--color-red-40);
	--color-error: var(--color-red-60);
	--color-error-dark: var(--color-red-90);
	--color-warning-light: var(--color-yellow-40);
	--color-warning: var(--color-yellow-60);
	--color-warning-dark: var(--color-yellow-80);
	--color-approved-light: var(--color-green-40);
	--color-approved: var(--color-green-60);
	--color-approved-dark: var(--color-green-80);

	/* Boarder Radius */
	--radius-xs: 4px;
	--radius-s: 8px;
	--radius-m: 16px;
	--radius-l: 24px;
	--radius-xl: 32px;
	--radius-2xl: 40px;

	/* Borders */
	--border-width-s: 2px;
	--border-width-m: 3px;
	--border-width-l: 4px;

	/* Shadows */
	--shadow: 0 6px 18px rgb(13 38 59 / 8%);

	/* Typography */
	--font-family-base: 'Nunito', sans-serif;

	/* Font Weights */
	--font-weight-light: 200;
	--font-weight-regular: 400;
	--font-weight-semibold: 600;
	--font-weight-bold: 800;

	/* Display / Headlines */
	--font-size-h1: 3rem; /* 48px */
	--font-weight-h1: var(--font-weight-bold);
	--font-size-h2: 2.25rem; /* 36px */
	--font-weight-h2: var(--font-weight-semibold);
	--font-size-h3: 1.75rem; /* 28px */
	--font-weight-h3: var(--font-weight-semibold);
	--font-size-h4: 1.375rem; /* 22px */
	--font-weight-h4: var(--font-weight-semibold);

	/* Paragraph */
	--font-size-p: 1rem; /* 16px */
	--font-weight-p: var(--font-weight-regular);

	/* Line Height */
	--line-height-s: 1.2;
	--line-height-m: 1.4;
	--line-height-l: 1.6;
	--line-height-xl: 1.8;

	/* Buttons */
	--font-size-button-small: 1rem;
	--font-size-button-big: 1.375rem;

	/* Inputs */
	--checkbox-height: 1.3rem;
	--input-width: 15rem;

	/* Other tokens */
	--link-underline-offset-s: 3px;
	--link-thickness-s: 2px;
	--link-underline-offset-m: 4px;
	--link-thickness-m: 3px;
	--link-underline-offset-l: 5px;
	--link-thickness-l: 4px;

	/* Spacing */
	--space-xs: 0.25rem; /* 4px */
	--space-s: 0.5rem; /* 8px */
	--space-m: 1rem; /* 16px */
	--space-l: 1.5rem; /* 24px */
	--space-xl: 2rem; /* 32px */
	--space-2xl: 2.5rem; /* 40px */
	--space-3xl: 3rem; /* 48px */

	/* NEW HOVER TRANSITIONS */
	--transition-short: 0.2s;
	--transition-medium: 0.3s;
	--transition-long: 0.4s;

	/* Max width */
	--max-width-xs: 350px;
	--max-width-s: 600px;
	--max-width-m: 800px;
	--max-width-l: 1000px;
}