/* Design Tokens - Auto-generated */
/* Do not edit directly - modify tokens.json instead */

/* === PRIMITIVES === */
:root {
  --primitive-color-gray-50: #F9FAFB;
  --primitive-color-gray-100: #F3F4F6;
  --primitive-color-gray-200: #E5E7EB;
  --primitive-color-gray-300: #D1D5DB;
  --primitive-color-gray-400: #9CA3AF;
  --primitive-color-gray-500: #6B7280;
  --primitive-color-gray-600: #4B5563;
  --primitive-color-gray-700: #374151;
  --primitive-color-gray-800: #1F2937;
  --primitive-color-gray-900: #111827;
  --primitive-color-gray-950: #030712;
  --primitive-color-blue-50: #EFF6FF;
  --primitive-color-blue-500: #3B82F6;
  --primitive-color-blue-600: #2563EB;
  --primitive-color-blue-700: #1D4ED8;
  --primitive-color-blue-800: #1E40AF;
  --primitive-color-red-500: #EF4444;
  --primitive-color-red-600: #DC2626;
  --primitive-color-red-700: #B91C1C;
  --primitive-color-green-500: #22C55E;
  --primitive-color-green-600: #16A34A;
  --primitive-color-yellow-500: #EAB308;
  --primitive-color-white: #FFFFFF;
  --primitive-color-primary-50: #62F57D;
  --primitive-color-primary-100: #62F57D;
  --primitive-color-primary-200: #BAFFD1;
  --primitive-color-primary-300: #87FF9E;
  --primitive-color-primary-400: #54D36B;
  --primitive-color-primary-500: #21A038;
  --primitive-color-primary-600: #0D8523;
  --primitive-color-primary-700: #005400;
  --primitive-color-primary-800: #002D00;
  --primitive-color-primary-900: #000700;
  --primitive-color-secondary-50: #00ADEE;
  --primitive-color-secondary-100: #00ADEE;
  --primitive-color-secondary-200: #99FFFF;
  --primitive-color-secondary-300: #66EDFF;
  --primitive-color-secondary-400: #33BAFF;
  --primitive-color-secondary-500: #0087CD;
  --primitive-color-secondary-600: #0382A6;
  --primitive-color-secondary-700: #003B81;
  --primitive-color-secondary-800: #00145A;
  --primitive-color-secondary-900: #000034;
  --primitive-color-accent-50: #00D900;
  --primitive-color-accent-100: #00D900;
  --primitive-color-accent-200: #DBFFFF;
  --primitive-color-accent-300: #A8FFFF;
  --primitive-color-accent-400: #75FFE7;
  --primitive-color-accent-500: #42E3B4;
  --primitive-color-accent-600: #21BA72;
  --primitive-color-accent-700: #009768;
  --primitive-color-accent-800: #007041;
  --primitive-color-accent-900: #004A1B;
  --primitive-spacing-0: 0;
  --primitive-spacing-1: 0.25rem;
  --primitive-spacing-2: 0.5rem;
  --primitive-spacing-3: 0.75rem;
  --primitive-spacing-4: 1rem;
  --primitive-spacing-5: 1.25rem;
  --primitive-spacing-6: 1.5rem;
  --primitive-spacing-8: 2rem;
  --primitive-spacing-10: 2.5rem;
  --primitive-spacing-12: 3rem;
  --primitive-spacing-16: 4rem;
  --primitive-fontSize-xs: 0.75rem;
  --primitive-fontSize-sm: 0.875rem;
  --primitive-fontSize-base: 1rem;
  --primitive-fontSize-lg: 1.125rem;
  --primitive-fontSize-xl: 1.25rem;
  --primitive-fontSize-2xl: 1.5rem;
  --primitive-fontSize-3xl: 1.875rem;
  --primitive-fontSize-4xl: 2.25rem;
  --primitive-radius-none: 0;
  --primitive-radius-sm: 0.125rem;
  --primitive-radius-default: 0.25rem;
  --primitive-radius-md: 0.375rem;
  --primitive-radius-lg: 0.5rem;
  --primitive-radius-xl: 0.75rem;
  --primitive-radius-full: 9999px;
  --primitive-shadow-none: none;
  --primitive-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --primitive-shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --primitive-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --primitive-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --primitive-duration-fast: 150ms;
  --primitive-duration-normal: 200ms;
  --primitive-duration-slow: 300ms;
}

/* === SEMANTIC === */
:root {
  --color-background: #F9FAFB;
  --color-foreground: #111827;
  --color-primary: #21A038;
  --color-primary-hover: #0D8523;
  --color-primary-foreground: #FFFFFF;
  --color-secondary: #0087CD;
  --color-secondary-foreground: #111827;
  --color-muted: #F3F4F6;
  --color-muted-foreground: #6B7280;
  --color-destructive: #DC2626;
  --color-destructive-foreground: #FFFFFF;
  --color-border: #E5E7EB;
  --color-ring: #3B82F6;
  --color-primary-active: #005400;
  --color-primary-light: #54D36B;
  --color-primary-lighter: #62F57D;
  --color-primary-dark: #0D8523;
  --color-secondary-hover: #0382A6;
  --color-secondary-light: #66EDFF;
  --color-secondary-dark: #0382A6;
  --color-accent: #42E3B4;
  --color-accent-hover: #21BA72;
  --color-accent-light: #A8FFFF;
  --color-success: #42E3B4;
  --color-success-light: #A8FFFF;
  --color-error: #21A038;
  --color-error-light: #87FF9E;
  --color-info: #0087CD;
  --color-info-light: #66EDFF;
  --spacing-component: 1rem;
  --spacing-section: 3rem;
}

/* === COMPONENTS === */
:root {
  --button-bg: #21A038;
  --button-fg: #FFFFFF;
  --button-hover-bg: #0D8523;
  --button-padding-x: 1rem;
  --button-padding-y: 0.5rem;
  --button-radius: 0.375rem;
  --button-font-size: 0.875rem;
  --input-bg: #F9FAFB;
  --input-border: #E5E7EB;
  --input-focus-ring: #3B82F6;
  --input-padding-x: 0.75rem;
  --input-padding-y: 0.5rem;
  --input-radius: 0.375rem;
  --card-bg: #FFFFFF;
  --card-border: #E5E7EB;
  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --card-padding: 1.5rem;
  --card-radius: 0.5rem;
}

/* === DARK MODE === */
.dark {
  --color-background: #030712;
  --color-foreground: #F9FAFB;
  --color-secondary: #1F2937;
  --color-muted: #1F2937;
  --color-muted-foreground: #9CA3AF;
  --color-border: #1F2937;
}