/* ==========================================================================
   Andrea GM Auto Import — Design tokens
   Paleta derivada del branding: azul #0079ce · naranja #fe9e00 · negro
   ========================================================================== */

:root {
  /* --- Marca: azul --- */
  --blue-50:  #e7f4fe;
  --blue-100: #c5e5fc;
  --blue-200: #8fcdf8;
  --blue-300: #55b2f2;
  --blue-400: #2199e8;
  --blue-500: #0b8ae0;
  --blue-600: #0072c4;
  --blue-700: #005a9c;
  --blue-800: #004476;
  --blue-900: #002f52;

  /* --- Marca: naranja --- */
  --orange-50:  #fff5e3;
  --orange-100: #ffe6ba;
  --orange-200: #ffd184;
  --orange-300: #ffbb4d;
  --orange-400: #ffa823;
  --orange-500: #ff9d0a;
  --orange-600: #e08600;
  --orange-700: #b56b00;
  --orange-800: #8a5100;
  --orange-900: #5e3800;

  /* --- Neutros (base oscura) --- */
  --ink-950: #06070a;
  --ink-900: #08090c;
  --ink-850: #0b0d12;
  --ink-800: #0f1117;
  --ink-700: #171b24;
  --ink-600: #1f242f;
  --ink-500: #2b313d;
  --ink-400: #3c4453;
  --ink-300: #5b6474;
  --ink-200: #8a93a3;
  --ink-100: #b8bfcb;
  --ink-50:  #e6e9ef;

  /* --- Semánticos --- */
  --bg-base: var(--ink-900);
  --bg-surface: var(--ink-800);
  --bg-elevated: var(--ink-700);
  --bg-sunken: var(--ink-950);
  --bg-inverse: #f6f8fb;

  --text: #f4f6fa;
  --text-strong: #ffffff;
  --text-muted: #a3abba;
  --text-subtle: #767f8f;
  --text-inverse: #10131a;

  --primary: var(--blue-500);
  --primary-hover: var(--blue-400);
  --primary-active: var(--blue-600);
  --accent: var(--orange-500);
  --accent-hover: var(--orange-400);
  --accent-active: var(--orange-600);

  --success: #22c07d;
  --warning: var(--orange-400);
  --danger: #f2544b;
  --whatsapp: #25d366;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(255, 157, 10, 0.4);
  --border-primary: rgba(11, 138, 224, 0.4);

  /* --- Degradados --- */
  --grad-brand: linear-gradient(100deg, var(--blue-500) 0%, var(--orange-500) 100%);
  --grad-brand-soft: linear-gradient(100deg, rgba(11, 138, 224, 0.18) 0%, rgba(255, 157, 10, 0.18) 100%);
  --grad-blue: linear-gradient(135deg, var(--blue-400), var(--blue-700));
  --grad-orange: linear-gradient(135deg, var(--orange-400), var(--orange-600));
  --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0));
  --grad-fade-dark: linear-gradient(180deg, rgba(8, 9, 12, 0) 0%, rgba(8, 9, 12, 0.75) 55%, var(--ink-900) 100%);

  /* --- Tipografía --- */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1rem;
  --fs-lg:   clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
  --fs-xl:   clamp(1.25rem, 0.7vw + 1.1rem, 1.5rem);
  --fs-2xl:  clamp(1.5rem, 1.3vw + 1.2rem, 2rem);
  --fs-3xl:  clamp(1.875rem, 2.2vw + 1.35rem, 2.75rem);
  --fs-4xl:  clamp(2rem, 3.6vw + 1.15rem, 3.75rem);
  --fs-5xl:  clamp(2.25rem, 5vw + 1.1rem, 4.75rem);

  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-normal: 1.6;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.16em;

  /* --- Espaciado --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3rem;
  --sp-10: 4rem;
  --sp-11: 5rem;
  --sp-12: 6.5rem;

  --section-y: clamp(3.5rem, 6vw, 6.5rem);
  --container: 1240px;
  --container-narrow: 900px;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* --- Radios --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Sombras --- */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --sh-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
  --sh-xl: 0 40px 80px -24px rgba(0, 0, 0, 0.8);
  --sh-glow-primary: 0 12px 40px -12px rgba(11, 138, 224, 0.55);
  --sh-glow-accent: 0 12px 40px -12px rgba(255, 157, 10, 0.5);

  /* --- Movimiento --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.16s;
  --dur: 0.28s;
  --dur-slow: 0.5s;

  /* --- Capas --- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-drawer: 200;
  --z-fab: 300;
  --z-modal: 400;
  --z-toast: 500;

  --header-h: 76px;
}

@media (max-width: 1023px) {
  :root { --header-h: 66px; }
}