/* =============================================================
   Dentlion · tokens.css
   Única fuente de verdad de la identidad visual.
   Cambia la marca AQUÍ (colores, tipografía, espaciado…),
   nunca en los puntos de uso.
   ============================================================= */
:root {
  color-scheme: light;

  /* ---- Color · marca ---- */
  --navy-900: #06223f;
  --navy-800: #0a2c4d;
  --navy-700: #103a63;
  --navy-600: #18496f;

  --teal-700: #0b7a88;
  --teal-600: #0e96a5; /* primario */
  --teal-500: #14b1c2;
  --teal-400: #41ccd9;
  --teal-200: #a7e6ec;
  --teal-100: #d7f2f5;
  --teal-50:  #eef9fb;

  --gold-600: #e0a020;
  --gold-500: #f2b441; /* acento "lion" */
  --gold-300: #f9d489;

  --wa-600: #1ebe57;   /* WhatsApp hover */
  --wa-500: #25d366;   /* WhatsApp · CTA principal */

  /* ---- Color · neutros ---- */
  --white:    #ffffff;
  --ink:      #0e2336; /* texto principal */
  --ink-soft: #4a627a; /* texto secundario */
  --line:     #e3ecf3; /* bordes sutiles */
  --surface:  #f4f8fb; /* fondo de banda */
  --surface-2:#e9f1f8;

  /* ---- Color · semántico ---- */
  --color-text:           var(--ink);
  --color-muted:          var(--ink-soft);
  --color-primary:        var(--teal-600);
  --color-primary-strong: var(--teal-700);
  --color-accent:         var(--gold-500);
  --color-cta:            var(--wa-500);
  --color-cta-strong:     var(--wa-600);
  --color-bg:             var(--white);
  --color-surface:        var(--surface);
  --color-border:         var(--line);

  /* ---- Gradientes ---- */
  --grad-brand: linear-gradient(135deg, var(--navy-800) 0%, var(--teal-600) 100%);
  --grad-hero:  linear-gradient(150deg, #051d36 0%, #0a2c4d 45%, #0b6c7a 100%);
  --grad-teal:  linear-gradient(135deg, var(--teal-600), var(--teal-400));
  --grad-soft:  linear-gradient(135deg, var(--teal-50), var(--surface-2));

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

  --fs-hero: clamp(2.25rem, 1.4rem + 4.2vw, 4.1rem);
  --fs-h2:   clamp(1.7rem, 1.25rem + 2.2vw, 2.7rem);
  --fs-h3:   clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-h4:   1.0625rem;
  --fs-lead: clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem);
  --fs-base: 1rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.78rem;

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-base:  1.65;

  /* ---- Espaciado (escala 4px) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;

  /* ---- Layout ---- */
  --container: 1180px;
  --gutter: clamp(1.1rem, 0.6rem + 2vw, 2rem);
  --nav-h: 64px;
  --section-y: clamp(3.5rem, 2rem + 7vw, 6.5rem);

  /* ---- Radios ---- */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Sombras ---- */
  --sh-xs: 0 1px 2px rgba(13, 42, 74, 0.06);
  --sh-sm: 0 4px 14px rgba(13, 42, 74, 0.08);
  --sh-md: 0 12px 30px rgba(13, 42, 74, 0.1);
  --sh-lg: 0 24px 60px rgba(13, 42, 74, 0.16);
  --sh-cta: 0 10px 26px rgba(37, 211, 102, 0.4);

  /* ---- Transiciones ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.3s var(--ease);
  --t-slow: 0.5s var(--ease);

  /* ---- Z-index ---- */
  --z-float: 90;
  --z-nav: 100;
  --z-overlay: 200;
  --z-drawer: 300;
}

@media (min-width: 900px) {
  :root { --nav-h: 76px; }
}