/* ==========================================================================
   ZOONARANJA — Design Tokens / Variables
   Sistema de diseño premium para clínica veterinaria
   ========================================================================== */

:root {
  /* ---- Paleta de marca ---- */
  --blue-vet: #0B6E8C;
  --blue-vet-dark: #084F65;
  --blue-vet-light: #3B93AC;
  --turquoise: #14B8A6;
  --turquoise-light: #5EEAD4;
  --emerald: #10B981;
  --emerald-light: #6EE7B7;
  --orange: #FF7A30;
  --orange-dark: #E85D0A;
  --orange-light: #FFA268;

  /* ---- Neutros ---- */
  --white: #FFFFFF;
  --off-white: #F7FAFB;
  --ink-900: #0A1F2B;
  --ink-800: #122E3D;
  --ink-700: #1C4353;
  --ink-600: #33586A;
  --ink-500: #52738A;
  --ink-400: #7C9AAD;
  --ink-300: #ABC2CE;
  --ink-200: #D3E2E9;
  --ink-100: #EAF2F5;

  /* ---- Gradientes ---- */
  --grad-primary: linear-gradient(135deg, var(--blue-vet) 0%, var(--turquoise) 100%);
  --grad-warm: linear-gradient(135deg, var(--orange) 0%, #FFB347 100%);
  --grad-hero: linear-gradient(160deg, rgba(8,63,82,0.76) 0%, rgba(8,127,115,0.48) 55%, rgba(9,105,78,0.32) 100%);
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.15) 100%);
  --grad-mesh: radial-gradient(circle at 15% 20%, rgba(20,184,166,0.18), transparent 40%),
               radial-gradient(circle at 85% 15%, rgba(255,122,48,0.14), transparent 40%),
               radial-gradient(circle at 50% 85%, rgba(11,110,140,0.15), transparent 45%);

  /* ---- Sombras premium ---- */
  --shadow-xs: 0 2px 8px rgba(10,31,43,0.06);
  --shadow-sm: 0 4px 16px rgba(10,31,43,0.08);
  --shadow-md: 0 8px 30px rgba(10,31,43,0.10);
  --shadow-lg: 0 20px 60px rgba(10,31,43,0.14);
  --shadow-xl: 0 30px 80px rgba(10,31,43,0.18);
  --shadow-glow-turquoise: 0 0 40px rgba(20,184,166,0.35);
  --shadow-glow-orange: 0 0 40px rgba(255,122,48,0.4);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.4);

  /* ---- Glassmorphism ---- */
  --glass-bg: rgba(255,255,255,0.62);
  --glass-bg-dark: rgba(10,31,43,0.55);
  --glass-border: rgba(255,255,255,0.35);
  --glass-blur: 18px;

  /* ---- Tipografía ---- */
  --font-display: 'Clash Display', 'Space Grotesk', 'Poppins', sans-serif;
  --font-body: 'Inter', 'Poppins', -apple-system, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: 5.5rem;

  /* ---- Espaciado ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ---- Radios ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-full: 999px;

  /* ---- Transiciones ---- */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.25s;
  --dur-base: 0.45s;
  --dur-slow: 0.8s;

  /* ---- Z-index scale ---- */
  --z-cursor: 9999;
  --z-nav: 900;
  --z-companion: 850;
  --z-chatbot: 880;
  --z-modal: 950;
  --z-progress: 920;

  /* ---- Layout ---- */
  --container-max: 1320px;
  --nav-height: 84px;
}

/* ---- Modo oscuro ---- */
[data-theme="dark"] {
  --white: #0E1A22;
  --off-white: #0A1319;
  --ink-900: #F2F8FA;
  --ink-800: #E4EEF1;
  --ink-700: #C6D6DC;
  --ink-600: #A2B7BF;
  --ink-500: #7E97A1;
  --ink-400: #5C7580;
  --ink-300: #3E5560;
  --ink-200: #253841;
  --ink-100: #182931;

  --glass-bg: rgba(14,26,34,0.62);
  --glass-border: rgba(255,255,255,0.08);

  --shadow-xs: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.4);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --shadow-xl: 0 30px 80px rgba(0,0,0,0.55);
}