/* ============================================================================
 * DESIGN TOKENS — ODONTOLOGÍA LA 78 (CAPA 1 of 3)
 * Colores EXACTOS medidos del logo real (logo-fb-512.jpg + flyer de Facebook,
 * PIL, 08-Oct): TURQUESA #24BCCD (16.3% del logo, 22.5% del flyer) y MAGENTA
 * #763078 (12.2%). ⚠️ La paleta del brief viejo (#2B5F8F/#0FA898) venía del
 * homónimo de Albany (Australia) —DESCARTADA.
 * El turquesa medido es claro: para botones se oscurece manteniendo el tono.
 * Filosofía: "Urgencia turquesa" — clínico, visible, con energía magenta.
 * ============================================================================ */

:root {
  /* ── Color primario: turquesa de marca (oscurecido para AA) ──── */
  --brand-50:  #edfbfd;
  --brand-100: #d5f5f9;
  --brand-200: #aeeaf3;
  --brand-300: #6fd4e5;
  --brand-400: #2fc0d6;
  --brand-500: #17a2bb;  /* Turquesa medido #24BECD, un tono más profundo */
  --brand-600: #0c7f93;  /* Turquesa profundo legible con blanco */
  --brand-700: #0a687a;
  --brand-800: #085261;
  --brand-900: #063d49;
  --brand-950: #03262e;

  /* ── Color de acento: magenta de la cruz y el badge "LA 78" ─── */
  --accent-50:  #faf3f9;
  --accent-100: #f3e3f0;
  --accent-200: #e5c6df;
  --accent-300: #cf9cc7;  /* Magenta claro derivado — highlight sobre oscuro */
  --accent-400: #a95a9e;
  --accent-500: #763078;  /* Magenta medido — botones con blanco */
  --accent-600: #5f275f;
  --accent-700: #4d204e;
  --accent-800: #3d193e;
  --accent-900: #2f142f;

  /* ── Superficies con tinte turquesa muy suave ────────────────── */
  --surface:       #ffffff;
  --surface-muted: #f4fbfc;
  --surface-soft:  #e8f7f9;
  --surface-card:  #ffffff;

  /* ── Fondo oscuro ───────────────────────────────────────────── */
  --dark-bg:       #03262e;

  /* ── Texto ──────────────────────────────────────────────────── */
  --text:       #17262a;
  --text-muted: #4c5f64;
  --text-light: #93a5a9;

  /* ── Semantic colors ────────────────────────────────────────── */
  --success: #16a34a;
  --warning: #f59e0b;
  --danger:  #d93a2b;  /* Rojo de urgencia de su propio flyer */

  /* ── Tipografía ─────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* ── Radios ─────────────────────────────────────────────────── */
  --radius-sm:   0.4375rem;
  --radius-md:   0.625rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.125rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* ── Sombras (tinte turquesa profundo) ───────────────────────── */
  --shadow-sm:   0 2px 8px  rgba(6, 61, 73, 0.05);
  --shadow-md:   0 8px 24px rgba(6, 61, 73, 0.08);
  --shadow-lg:   0 16px 48px rgba(6, 61, 73, 0.11);
  --shadow-xl:   0 24px 64px rgba(6, 61, 73, 0.14);
  --shadow-2xl:  0 32px 80px rgba(6, 61, 73, 0.17);
  --shadow-glow: 0 12px 40px rgba(36, 188, 205, 0.3);

  --shadow-btn-primary:  0 4px 14px rgba(12, 127, 147, 0.32);
  --shadow-btn-accent:   0 4px 14px rgba(118, 48, 120, 0.32);
  --shadow-btn-whatsapp: 0 4px 14px rgba(37, 211, 102, 0.35);

  --focus-ring: 0 0 0 3px rgba(36, 188, 205, 0.25);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;

  --z-below:   -1;
  --z-base:    0;
  --z-content: 10;
  --z-sticky-cta: 50;
  --z-header:  100;
  --z-overlay: 199;
  --z-menu:    200;
  --z-wa-float: 90;
  --z-toast:   300;
}