/* GENERATED FILE - DO NOT EDIT MANUALLY */
/* Generated from design-tokens/tokens.json */
/* Run 'npm run build-tokens' in design-tokens/ to regenerate */

:root {
  /* ============================================ */
  /* 🎨 COLORS */
  /* ============================================ */

  /* Primary */
  --color-primary: #1E5631;
  --color-primary-light: #4C8C63;
  --color-primary-dark: #0F3319;
  --color-primary-surface: #E8F5E9;

  /* Secondary */
  --color-secondary: #455A64;
  --color-secondary-light: #718792;
  --color-secondary-dark: #1C313A;

  /* Accent */
  --color-accent: #BF360C;
  --color-accent-light: #FF7043;

  /* Neutral */
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #EEEEEE;
  --color-neutral-300: #E0E0E0;
  --color-neutral-400: #BDBDBD;
  --color-neutral-500: #9E9E9E;
  --color-neutral-600: #757575;
  --color-neutral-700: #616161;
  --color-neutral-800: #424242;
  --color-neutral-900: #212121;

  /* Semantic */
  --color-success: #2E7D32;
  --color-success-surface: #E8F5E9;
  --color-warning: #E65100;
  --color-warning-surface: #FFF3E0;
  --color-error: #C62828;
  --color-error-surface: #FFEBEE;
  --color-info: #1565C0;
  --color-info-surface: #E3F2FD;
  --color-rating-star: #FFD54F;

  /* External */
  --color-whatsapp: #25D366;

  /* Surfaces - Light Mode */
  --background: #FAFAFA;
  --surface: #FFFFFF;
  --surface-variant: #F5F5F5;
  --text-primary: #1A1A1A;
  --text-secondary: #666666;

  /* ============================================ */
  /* 📏 SPACING */
  /* ============================================ */

  --space4: 4px;
  --space8: 8px;
  --space12: 12px;
  --space14: 14px;
  --space16: 16px;
  --space20: 20px;
  --space24: 24px;
  --space32: 32px;
  --space40: 40px;
  --space48: 48px;
  --space56: 56px;
  --space64: 64px;
  --space6: 6px;

  /* ============================================ */
  /* 🔘 RADII */
  /* ============================================ */

  --radius-none: 0px;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-xlarge: 24px;
  --radius-full: 999px;

  /* ============================================ */
  /* 🌫️ SHADOWS */
  /* ============================================ */

  --shadow-small: 0px 2px 4px #0000000A;
  --shadow-medium: 0px 4px 8px #0000000F;
  --shadow-large: 0px 8px 16px #00000014;
  --shadow-strong: 0px 12px 24px #0000001F;

  /* ============================================ */
  /* ⏱️ DURATION */
  /* ============================================ */

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;

  /* ============================================ */
  /* 📐 SIZES */
  /* ============================================ */

  /* Buttons */
  --button-height-small: 40px;
  --button-height-medium: 48px;
  --button-height-large: 56px;

  /* Icons */
  --icon-xsmall: 16px;
  --icon-small: 18px;
  --icon-medium: 24px;
  --icon-large: 32px;
  --icon-xlarge: 40px;

  /* Input */
  --input-height: 56px;
  --touch-target: 48px;

  /* ============================================ */
  /* 📱 BREAKPOINTS */
  /* ============================================ */

  --breakpoint-mobile: 600px;
  --breakpoint-tablet: 900px;
  --breakpoint-desktop: 1200px;

  /* ============================================ */
  /* 🔲 BORDERS */
  /* ============================================ */

  --border-thin: 1px;
  --border-medium: 1.5px;
  --border-thick: 2px;

  /* ============================================ */
  /* 🎚️ OPACITY */
  /* ============================================ */

  --opacity-borderLight: 0.25;
  --opacity-disabled: 0.38;
  --opacity-focus: 0.12;
  --opacity-half: 0.5;
  --opacity-high: 0.8;
  --opacity-hover: 0.08;
  --opacity-light: 0.14;
  --opacity-max: 0.9;
  --opacity-medium: 0.3;
  --opacity-onSurface: 0.7;
  --opacity-overlay: 0.6;
  --opacity-pressed: 0.12;
  --opacity-scrim: 0.45;
  --opacity-scrimStrong: 0.54;
  --opacity-shadow: 0.2;
  --opacity-soft: 0.15;
  --opacity-strong: 0.4;
  --opacity-subtle: 0.1;
  --opacity-transparent: 0;
  --opacity-xs: 0.05;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #4C8C63;
    --color-primary-light: #1E5631;
    --background: #0F1115;
    --surface: #15181E;
    --surface-variant: #1D222B;
    --text-primary: #E6E9EF;
    --text-secondary: #B7BDC8;

    /* Darker shadows for dark mode */
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.6);
  }
}