/**
 * Irmanha Design Tokens
 * 
 * CSS custom properties for consistent design across all modules.
 * These tokens should be used by all module stylesheets.
 */

:root {
  /* Spacing Scale */
  --irmanha-space-1: 0.25rem;    /* 4px */
  --irmanha-space-2: 0.5rem;     /* 8px */
  --irmanha-space-3: 0.75rem;    /* 12px */
  --irmanha-space-4: 1rem;       /* 16px */
  --irmanha-space-5: 1.25rem;    /* 20px */
  --irmanha-space-6: 1.5rem;     /* 24px */
  --irmanha-space-8: 2rem;       /* 32px */
  --irmanha-space-10: 2.5rem;    /* 40px */
  --irmanha-space-12: 3rem;      /* 48px */
  --irmanha-space-16: 4rem;      /* 64px */
  --irmanha-space-20: 5rem;      /* 80px */
  --irmanha-space-24: 6rem;      /* 96px */
  --irmanha-space-32: 8rem;      /* 128px */
  --irmanha-space-40: 10rem;     /* 160px */
  --irmanha-space-48: 12rem;     /* 192px */
  --irmanha-space-56: 14rem;     /* 224px */
  --irmanha-space-64: 16rem;     /* 256px */
  --irmanha-space-72: 18rem;     /* 288px */
  --irmanha-space-80: 20rem;     /* 320px */
  --irmanha-space-88: 22rem;     /* 352px */
  --irmanha-space-96: 24rem;     /* 384px */
  
  /* Border Radius */
  --irmanha-radius-sm: 0.375rem;  /* 6px */
  --irmanha-radius-md: 0.5rem;    /* 8px */
  --irmanha-radius-lg: 0.75rem;   /* 12px */
  --irmanha-radius-xl: 1rem;      /* 16px */
  --irmanha-radius-2xl: 1.5rem;   /* 24px */
  --irmanha-radius-full: 9999px;
  
  /* Brand Colors */
  --irmanha-black: #010101;
  --irmanha-beige: #D9C2B0;
  --irmanha-grey: #E8E8E8;
  --irmanha-white: #FEFEFE;
  
  /* Responsive Typography Sizes */
  --irmanha-h1: clamp(2.5rem, 4rem + 4vw, 103px);     /* 40px min, 103px max */
  --irmanha-h2: clamp(1.5rem, 1rem + 1.5vw, 30px);    /* 24px min, 30px max */
  --irmanha-h3: clamp(1.125rem, 0.75rem + 1vw, 20px); /* 18px min, 20px max */
  --irmanha-h4: clamp(1rem, 0.75rem + 0.75vw, 1.5rem);
  --irmanha-h5: clamp(0.875rem, 0.75rem + 0.5vw, 1.25rem);
  --irmanha-h6: clamp(0.875rem, 0.75rem + 0.25vw, 1.125rem);
  
  /* Body Text */
  --irmanha-body: clamp(0.875rem, 0.75rem + 0.5vw, 16px);  /* 14px min, 16px max */
  --irmanha-body-lg: clamp(1rem, 0.875rem + 0.5vw, 1.25rem);
  --irmanha-body-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --irmanha-text-base: 1rem; /* 16px - base text size */

  /* Tablet Typography (medium screens) */
  --irmanha-body-tablet: 1.4rem; /* 22px */
  --irmanha-body-tablet-lg: 1.4rem; /* 22px */

  /* Mobile Typography (for better readability on small screens) */
  --irmanha-body-mobile: clamp(1.4rem, 0.875rem + 0.5vw, 1.125rem); /* 16px min, 18px max - responsive */
  --irmanha-body-mobile-sm: 1.125rem; /* 18px */
  --irmanha-body-mobile-xs: 1.25rem; /* 20px */
  --irmanha-text-mobile-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem); /* 18px min, 20px max - for buttons, descriptions, etc. */
  --irmanha-price-mobile: clamp(1.5rem, 1.25rem + 1vw, 1.75rem); /* 24px min, 28px max - for mobile prices */
  
  /* Font Weights */
  --irmanha-font-weight-light: 300;
  --irmanha-font-weight-normal: 400;
  --irmanha-font-weight-medium: 500;
  --irmanha-font-weight-semibold: 600;
  --irmanha-font-weight-bold: 700;
  --irmanha-font-weight-extrabold: 800;
  
  /* Line Heights */
  --irmanha-leading-none: 1;
  --irmanha-leading-tight: 1.25;
  --irmanha-leading-snug: 1.375;
  --irmanha-leading-normal: 1.5;
  --irmanha-leading-relaxed: 1.625;
  --irmanha-leading-loose: 2;
  
  /* Z-Index Scale */
  --irmanha-z-dropdown: 1000;
  --irmanha-z-sticky: 1020;
  --irmanha-z-fixed: 1030;
  --irmanha-z-modal-backdrop: 1040;
  --irmanha-z-modal: 1050;
  --irmanha-z-popover: 1060;
  --irmanha-z-tooltip: 1070;
  --irmanha-z-toast: 1080;
  
  /* Breakpoints (for reference in CSS) */
  --irmanha-breakpoint-sm: 640px;
  --irmanha-breakpoint-md: 768px;
  --irmanha-breakpoint-lg: 1024px;
  --irmanha-breakpoint-xl: 1280px;
  --irmanha-breakpoint-2xl: 1536px;
  
  /* Animation */
  --irmanha-transition-fast: 150ms ease-in-out;
  --irmanha-transition-base: 250ms ease-in-out;
  --irmanha-transition-slow: 350ms ease-in-out;
  
  /* Aspect Ratios */
  --irmanha-aspect-square: 1 / 1;
  --irmanha-aspect-video: 16 / 9;
  --irmanha-aspect-photo: 4 / 3;
  --irmanha-aspect-portrait: 3 / 4;
  
  /* Icon Sizes */
  --irmanha-icon-cart: 2.5rem;
  --irmanha-icon-lg: 3rem; /* 48px */
  
  /* Button Typography */
  --irmanha-button-hero: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem); /* 24px min, 40px max */
  --irmanha-button-hero-mobile: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); /* 18px min, 24px max */
  
  /* Special Typography */
  --irmanha-divider-text: clamp(1.0rem, 1rem + 1.0vw, 25px); /* 16px min, 25px max */
}