/* ==========================================================================
   HWI Pellets / Hardwoodindustry Design System Tokens
   Strict adherence to the official HWI design language
   ========================================================================== */

:root {
  /* --- 1. Color Palette: Primary --- */
  --color-forest-green: #162D21;          /* Primary brand authority */
  --color-action-orange: #EA550B;         /* Primary CTA & interactive elements */

  /* --- 2. Color Palette: Accent --- */
  --color-warm-orange: #FB923C;           /* Hover states & secondary accent */

  /* --- 3. Interactive / Text on Dark --- */
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-secondary: rgba(255, 255, 255, 0.7);
  --color-text-on-dark-tertiary: rgba(255, 255, 255, 0.4);
  --color-border-on-dark: rgba(255, 255, 255, 0.2);
  --color-border-on-dark-hover: rgba(255, 255, 255, 0.4);
  --color-surface-on-dark: rgba(255, 255, 255, 0.08);

  /* --- 4. Neutral Scale --- */
  --color-canvas-base: #E5E2DC;           /* Primary neutral surface */
  --color-white: #FFFFFF;                 /* Cards, containers, overlay base */
  --color-off-white-soft: #F8F8F6;        /* Subtle contrast & inputs */
  --color-gray-light: #E5E7EB;            /* Subtle dividers & borders */
  --color-gray-medium: #D1D5DB;           /* Secondary text, inactive borders */
  --color-gray-dark: #374151;             /* Secondary body text */
  --color-charcoal: #111827;              /* Dark headings & tech text */
  --color-near-black: #1A1410;            /* Maximum contrast dark */
  --color-black: #000000;                 /* Deep black */

  /* --- 5. Surface & Borders --- */
  --color-border-light: #E5E2DC;          /* Standard card/input border */
  --color-border-neutral: #CCCCCC;        /* Alternate defined border */

  /* --- 6. Brand Text --- */
  --color-text-dark: #162D21;             /* Primary text on light canvas */
  --color-text-secondary: #60766B;        /* Muted green-gray secondary text */

  /* --- 7. Semantic / Status --- */
  --color-error: #DC2626;
  --color-error-bg: rgba(220, 38, 38, 0.1);
  --color-error-border: rgba(220, 38, 38, 0.3);

  --color-warning: #FDE047;
  --color-warning-text: #854D0E;
  --color-warning-bg: rgba(253, 224, 71, 0.2);
  --color-warning-border: rgba(253, 224, 71, 0.5);

  --color-success: #1FBC5B;
  --color-success-secondary: #1AAD52;
  --color-success-bg: rgba(31, 188, 91, 0.12);
  --color-success-border: rgba(31, 188, 91, 0.35);

  /* --- 8. Typography Families --- */
  --font-family-headings: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- 9. Spacing Scale (4px base) --- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-80: 80px;

  /* --- 10. Border Radius Scale --- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* --- 11. Elevation Shadows --- */
  --shadow-none: none;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-md: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  --shadow-xl: 0px 0px 0px 0px #ffffff, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);

  /* --- 12. Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* --- 13. Layout & Grid --- */
  --container-max-width: 1200px;
  --header-height: 72px;

  /* --- 14. Z-index System --- */
  --z-base: 0;
  --z-dropdown: 10;
  --z-dropdown-alt: 50;
  --z-sticky: 100;
  --z-modal-backdrop: 999;
  --z-modal: 1000;
  --z-tooltip: 1001;
  --z-toast: 1100;
}