:root {
	/*==========================================
	  1. Color System
	  ========================================*/

	/* 1.1 Brand Colors */

	--color-primary: #16a34a;
	--color-primary-light: #86efac;
	--color-primary-dark: #14532d;

	--color-primary-900: color-mix(in oklch, var(--color-primary) 85%, black);
	--color-primary-800: color-mix(in oklch, var(--color-primary) 75%, black);
	--color-primary-700: color-mix(in oklch, var(--color-primary) 65%, black);
	--color-primary-600: color-mix(in oklch, var(--color-primary) 90%, black);
	--color-primary-500: var(--color-primary);
	--color-primary-400: color-mix(in oklch, var(--color-primary) 80%, white);
	--color-primary-300: color-mix(in oklch, var(--color-primary) 60%, white);
	--color-primary-200: color-mix(in oklch, var(--color-primary) 40%, white);
	--color-primary-100: color-mix(in oklch, var(--color-primary) 12%, white);

	--grayscale-900: #181818;
	--grayscale-800: #3a3a3a;
	--grayscale-700: #5d5d5d;
	--grayscale-600: #747474;
	--grayscale-500: #9e9e9e;
	--grayscale-400: #bababa;
	--grayscale-300: #dedede;
	--grayscale-200: #ebebeb;
	--grayscale-100: #f5f5f5;
	--grayscale-50: #fcfcfc;

	--color-surface: #fff;
	--color-surface-alt: #f0fdf4;
	--color-tile: var(--color-surface-alt);

	--color-text: #1a2e1a;
	--color-text-light: #6b7280;
	--color-placeholder: #B3B3B3;
	--color-disabled-bg: #E5E5E9;
	--color-disabled-text: #9CA3AF;

	--color-success: #16a34a;
	--color-warning: #d97706;
	--color-error: #dc2626;
	--color-info: #2563eb;

	--color-water: #0ea5e9;
	--color-water-bg: color-mix(in oklch, var(--color-water) 12%, white);
	--color-fertilize: #a16207;
	--color-fertilize-bg: color-mix(in oklch, var(--color-fertilize) 10%, white);

	--color-border: #d1fae5;
	--color-outline: rgba(22, 163, 74, 0.55);
	--color-focus-ring: rgba(22, 163, 74, 0.30);

	--color-shadow: rgba(0, 0, 0, 0.05);

	/*==========================================
	  2. Typography
	  ========================================*/

	--font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--font-h1: 700 3rem/120% var(--font-family);
	--font-h2: 700 2.5rem/120% var(--font-family);
	--font-h3: 700 2rem/120% var(--font-family);
	--font-h4: 700 1.5rem/120% var(--font-family);
	--font-h5: 700 1.25rem/120% var(--font-family);
	--font-h6: 700 1.125rem/120% var(--font-family);

	--font-body-xlarge-regular: 400 1.125rem/140% var(--font-family);
	--font-body-xlarge-semibold: 600 1.125rem/140% var(--font-family);
	--font-body-xlarge-bold: 700 1.125rem/140% var(--font-family);

	--font-body-large-regular: 400 1rem/140% var(--font-family);
	--font-body-large-medium: 500 1rem/140% var(--font-family);
	--font-body-large-semibold: 600 1rem/140% var(--font-family);
	--font-body-large-bold: 700 1rem/140% var(--font-family);

	--font-body-medium-regular: 400 0.875rem/140% var(--font-family);
	--font-body-medium-medium: 500 0.875rem/140% var(--font-family);
	--font-body-medium-semibold: 600 0.875rem/140% var(--font-family);
	--font-body-medium-bold: 700 0.875rem/140% var(--font-family);

	--font-body-small-regular: 400 0.75rem var(--font-family);
	--font-body-small-medium: 500 0.75rem var(--font-family);
	--font-body-small-semibold: 600 0.75rem var(--font-family);
	--font-body-small-bold: 700 0.75rem var(--font-family);

	--font-body-xsmall-regular: 400 0.625rem var(--font-family);
	--font-body-xsmall-bold: 700 0.625rem var(--font-family);

	--font-body: var(--font-body-medium-regular);

	/*==========================================
	  3. Spacing
	  ========================================*/

	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;
	--spacing-xl: 32px;
	--spacing-2xl: 48px;

	/*==========================================
	  4. Radii
	  ========================================*/

	--radius-small: 8px;
	--radius-input: 12px;
	--radius-medium: 16px;
	--radius-card: 20px;
	--radius-modal: 24px;
	--radius-button: 999px;

	/*==========================================
	  5. Shadows
	  ========================================*/

	--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-button: 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(22, 163, 74, 0.25);
	--shadow-nav: 0 -1px 4px rgba(0, 0, 0, 0.06);

	/*==========================================
	  6. Borders
	  ========================================*/

	--separator-over-white: 1px solid #00000010;
	--border-subtle: 1px solid rgba(22, 163, 74, 0.12);
	--border-accent: 1px solid var(--color-primary-500);

	/*==========================================
	  7. Misc
	  ========================================*/

	--btn-rounded-border-radius: 100px;
	--btn-filled-border-radius: 16px;
	--page-padding: 20px;
	--input-height: 60px;

	--padding-left: calc(var(--spacing-lg) + env(safe-area-inset-left));
	--padding-right: calc(var(--spacing-lg) + env(safe-area-inset-right));

	--app-header-h: calc(66px + env(safe-area-inset-top));
}