/* ==========================================================================
   VALE MENCARINI — DESIGN TOKENS & SYSTEM VARIABLES
   Brand Kit & WCAG 2.2 AA Calibrated
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Brand Palette (Vale Mencarini Official) */
  --color-primary: #162D1E;
  --color-primary-rgb: 22, 45, 30;
  --color-primary-dark: #0D1C12;
  --color-primary-light: #21432D;

  --color-secondary: #333F23;
  --color-secondary-rgb: 51, 63, 35;
  --color-sage: #5C6552;
  --color-sage-rgb: 92, 101, 82;
  --color-sage-light: #7E8B72;

  --color-accent: #996533;
  --color-accent-rgb: 153, 101, 51;
  --color-accent-hover: #B4793F;
  --color-accent-light: #DE9B5B;
  --color-accent-glow: rgba(153, 101, 51, 0.4);

  --color-stone: #939385;
  --color-stone-light: #B8B8AD;
  --color-sand: #F4F3EF;
  --color-sand-rgb: 244, 243, 239;
  --color-sand-dark: #E2E0D8;

  --color-white: #FFFFFF;
  --color-dark-bg: #0C1710;
  --color-dark-surface: #142419;
  --color-dark-card: rgba(22, 45, 30, 0.72);
  --color-dark-glass: rgba(12, 23, 16, 0.85);

  --color-text-main: #242B21;
  --color-text-muted: #5C6552;
  --color-text-light: #F4F3EF;
  --color-text-light-muted: #B8B8AD;

  /* Glassmorphism & Borders */
  --border-glass: rgba(244, 243, 239, 0.12);
  --border-glass-hover: rgba(153, 101, 51, 0.4);
  --border-subtle: rgba(92, 101, 82, 0.2);
  --glass-blur: blur(16px);
  --glass-blur-heavy: blur(24px);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans: 'Montserrat', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Fluid Font Sizes */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.375rem);
  --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.125rem);
  --text-5xl: clamp(2.75rem, 2.35rem + 2vw, 4rem);
  --text-6xl: clamp(3.25rem, 2.65rem + 3vw, 5.25rem);

  /* Spacing Scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Layout Containers */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(12, 23, 16, 0.08);
  --shadow-md: 0 8px 24px rgba(12, 23, 16, 0.14);
  --shadow-lg: 0 16px 40px rgba(12, 23, 16, 0.22);
  --shadow-glow: 0 0 32px var(--color-accent-glow);
  --shadow-inner-glass: inset 0 1px 1px rgba(255, 255, 255, 0.15);

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-Index Hierarchy */
  --z-negative: -1;
  --z-elevate: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 500;
  --z-floating: 800;
  --z-modal: 1000;
  --z-toast: 1100;
}