/* ============================================================
   COLORS & DESIGN TOKENS — Dental Medical Corp
   Extraídos del Home (Tailwind config) generado en UX Pilot.
   ============================================================ */
:root {

    --body-bg-background: #FFFFFF;

    /* ── Brand — Teal (primario) ──────────────────────────────── */
    --teal:           #14B8A6;
    --teal-dark:      #115E59;   /* brand.darkteal — fondos oscuros (sección contacto) */
    --teal-600:       #0D9488;   /* hover de botones/links teal */
    --teal-soft:      #CCFBF1;   /* fondos suaves / chips */

    /* ── Brand — Orange (acento / CTA) ────────────────────────── */
    --orange:         #F97316;
    --orange-600:     #EA580C;   /* hover botones CTA */
    --orange-soft:    #FFEDD5;   /* fondos suaves / chips */

    /* Gradiente de marca: usado en overlays y detalles decorativos */
    --brand-gradient: linear-gradient(90deg, var(--teal), var(--orange));

    /* ── Text ───────────────────────────────────────────────── */
    --text-main:      #4B5563;   /* body copy — gray-600 */
    --text-dark:      #111827;   /* h1, h2, h3 — gray-900 */
    --text-charcoal:  #1F2937;   /* brand.charcoal — texto base body */
    --text-teal:      #14B8A6;   /* títulos/accent secundario */

    /* ── Grays (paleta Tailwind usada en el Home) ─────────────── */
    --gray-50:        #F9FAFB;
    --gray-100:       #F3F4F6;
    --gray-200:       #E5E7EB;
    --gray-400:       #9CA3AF;
    --gray-500:       #6B7280;
    --gray-600:       #4B5563;
    --gray-700:       #374151;
    --gray-800:       #1F2937;
    --gray-900:       #111827;

    --footer-bg:      #111827;   /* gray-900 */
    --footer-bg-line: #1F2937;   /* gray-800 */
    --footer-text:    rgba(255,255,255,0.65);
    --footer-white:   #FFFFFF;

    /* ── Hero Background (overlay sobre imagen) ───────────────── */
    --hero-overlay:   rgba(0, 0, 0, 0.6);

    /* ── Green (WhatsApp) ───────────────────────────────────── */
    --green-500:      #22C55E;
    --green-600:      #16A34A;

    /* ── White ──────────────────────────────────────────────── */
    --white:          #FFFFFF;

    /* ── Shadows ────────────────────────────────────────────── */
    --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* ── Spacing / Layout ───────────────────────────────────── */
    --max-width:      1280px;
    --px:             1.5rem;

    /* ── Typography ─────────────────────────────────────────── */
    --font-main:      'Inter', sans-serif;

    /* ── Transitions ────────────────────────────────────────── */
    --transition:     0.3s ease;

    /* ── Section spacing ────────────────────────────────────── */
    --section-py:       96px;   /* py-24 (Tailwind) */
    --section-py-two:   80px;   /* py-20 */
    --col-gap:          24px;
    --h2-titles-mb:     1rem;
    --block-mb:         2rem;

    /* ── Alias de compatibilidad ────────────────────────────────
       Los templates de interiores (About, Médicos, Servicios, etc.)
       se portaron 1:1 desde Implant Design Solutions y usan estos
       nombres de variable. En vez de reescribir su CSS línea por
       línea, se retokenizan aquí: heredan la paleta teal/orange de
       Dental Medical Corp automáticamente. ─────────────────────── */
    --gold:           var(--teal);
    --gold-light:     var(--teal-soft);
    --gold-border:    var(--teal);
    --gold-soft:      var(--teal-soft);
    --gold-gradient:  var(--brand-gradient);
    --text-gold:      var(--teal);
    --yellow-btn:     var(--orange);
    --gray-300:       #D1D5DB;
    --gray-1100:      #9C9C9C;
}