/* ============================================
   LENHAS PORTUGAL : Design Tokens & Artistic Direction
   Terracotta, Ember Amber, Volcanic Charcoal & Cork Sand
   Full WebKit Engine & Mobile-First Optimization
   ============================================ */

:root {
  /* ─── Nova Direção Artística (Portugal / Lenhas & Biomassa) ─── */
  /* Terracota Portuguesa & Chama */
  --primary: #C85A32;
  --primary-light: #DF734B;
  --primary-dark: #A23E1B;
  --primary-rgb: 200, 90, 50;
  --color-primary: var(--primary);

  /* Âmbar & Fogo Vivo */
  --accent: #E67E22;
  --accent-hover: #D35400;
  --accent-light: #F39C12;
  --accent-rgb: 230, 126, 34;

  /* Verde Pinhal & Oliveira Lusitana */
  --accent-forest: #2A4736;
  --accent-forest-light: #3A624B;

  /* WhatsApp Oficial */
  --whatsapp: #25D366;
  --whatsapp-hover: #1EBE5D;
  --whatsapp-dark: #128C7E;

  /* Carvão Vulcânico & Superfícies Escuras */
  --dark-base: #14181D;
  --dark-elevated: #1B2128;
  --dark-surface: #242B35;
  --dark-border: rgba(255, 255, 255, 0.12);

  /* Areia Quente & Pedra Alentejana (Secções Claras) */
  --surface: #FFFFFF;
  --surface-elevated: #FAF8F5;
  --background: #F4EFEB;
  --background-alt: #EBE3D9;
  --text: #1E232A;
  --text-muted: #5A6472;
  --text-light: #8C96A5;
  --text-on-primary: #FFFFFF;
  --text-on-accent: #FFFFFF;

  /* ─── Bordaduras & Separadores ─── */
  --border: #E2D9CE;
  --border-light: #EFE8DE;
  --border-focus: var(--primary);

  /* ─── Estados Semânticos ─── */
  --success: #15803D;
  --success-bg: #F0FDF4;
  --warning: #D97706;
  --warning-bg: #FFFBEB;
  --danger: #B91C1C;
  --danger-bg: #FEF2F2;
  --info: #0284C7;
  --info-bg: #F0F9FF;

  /* ─── Tipografia ─── */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.03em;
  --tracking-wider: 0.06em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ─── Espaçamentos (escala 4px) ─── */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ─── Border Radius ─── */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ─── Sombras ─── */
  --shadow-sm: 0 1px 3px rgba(20, 24, 29, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(20, 24, 29, 0.08), 0 2px 4px -1px rgba(20, 24, 29, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(20, 24, 29, 0.12), 0 4px 8px -2px rgba(20, 24, 29, 0.06);
  --shadow-xl: 0 20px 32px -6px rgba(20, 24, 29, 0.16), 0 8px 16px -4px rgba(20, 24, 29, 0.08);
  --shadow-whatsapp: 0 8px 24px rgba(37, 211, 102, 0.35);
  --shadow-card-hover: 0 20px 40px rgba(200, 90, 50, 0.16);

  /* ─── Transições & Desempenho ─── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-Index ─── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-navbar: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* ─── Largeurs max ─── */
  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-2xl: 1440px;

  /* ─── Glassmorphism WebKit ─── */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-blur: blur(16px);

  /* ─── WebKit & Safe Area Insets ─── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --promo-height: 0px;

  /* ─── Dynamic Viewport Heights (WebKit/iOS Safari) ─── */
  --vh-dynamic: 100dvh;
  --vh-small: 100svh;
  --touch-target-min: 44px;
}

/* Reset universal WebKit & Acessibilidade móvel */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

button, a, input, select, textarea {
  touch-action: manipulation;
}

/* Utilitário de scroll com inércia WebKit */
.webkit-momentum-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}