/* ==========================================================================
   DESIGN TOKENS & SYSTEM VARIABLES
   Gioele Lombardi - Premium Web Development & Design
   ========================================================================== */

:root {
  /* Brand Color Palette */
  --bg-main: #e4e7eb;
  --bg-secondary: #d7dce2;
  --bg-card: rgba(255, 255, 255, 0.96);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(239, 242, 245, 0.94);
  --bg-input: #ffffff;

  /* Borders & Dividers */
  --border-subtle: rgba(44, 54, 78, 0.12);
  --border-focus: rgba(95, 80, 210, 0.45);
  --border-hover: rgba(44, 54, 78, 0.22);
  --border-accent: rgba(118, 103, 232, 0.3);

  /* Typography Colors */
  --text-primary: #1f2937;
  --text-secondary: #3f4d62;
  --text-muted: #59677b;
  --text-inverse: #ffffff;

  /* Accent Colors */
  --accent-primary: #7667e8;       /* Refined Indigo */
  --accent-primary-hover: #5f50d2;
  --accent-gradient: linear-gradient(135deg, #7667e8 0%, #38bdf8 100%);
  --accent-glow: rgba(118, 103, 232, 0.2);
  --accent-azure: #08708d;
  --accent-emerald: #087a55;

  /* WhatsApp Brand Tokens */
  --whatsapp-color: #25d366;
  --whatsapp-hover: #1ebe5d;
  --whatsapp-glow: rgba(37, 211, 102, 0.35);
  --whatsapp-surface: rgba(37, 211, 102, 0.12);

  /* Typography */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid Font Sizes */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.84rem, 0.8rem + 0.25vw, 0.9375rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.3rem, 1.2rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.6rem, 1.4rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.6rem + 1.8vw, 2.75rem);
  --text-4xl: clamp(2.4rem, 1.9rem + 2.5vw, 3.75rem);
  --text-hero: clamp(2.6rem, 2.1rem + 3vw, 4.25rem);

  /* Spacings & Layout */
  --container-width: 1240px;
  --container-narrow: 900px;
  --header-height: 80px;
  --section-padding: clamp(4.5rem, 8vw, 7.5rem);

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: 0 4px 20px rgba(34, 48, 76, 0.08);
  --shadow-card: 0 12px 32px -12px rgba(34, 48, 76, 0.16), 0 0 0 1px rgba(44, 54, 78, 0.06);
  --shadow-card-hover: 0 20px 40px -12px rgba(34, 48, 76, 0.2), 0 0 22px rgba(118, 103, 232, 0.1);
  --shadow-glow: 0 0 35px var(--accent-glow);
  --shadow-whatsapp: 0 10px 25px var(--whatsapp-glow);

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.45s cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index layers */
  --z-bg: -1;
  --z-base: 1;
  --z-header: 100;
  --z-modal: 500;
  --z-floating: 600;
  --z-toast: 1000;
}