/* ============================================================
   COLORS & DESIGN TOKENS — NA'AT Clínica Dental
   ============================================================ */
:root {
    /* Brand */
    --azul: #2d7dd2;
    --azul-dark: #1a3a5c;
    --azul-titulo: #375ea9;
    --azul-cta: #3d7ab6;
    --azul-borde: #3167d9;
    --azul-hover: #1e6ab8;
    --azul-light: #e8f1fb;
    --azul-light-two: #d0e4f7;

    /* Fondos */
    --fondo-hero: #f0f4f8;
    --fondo-dark: #3d5166;
    --fondo-dark-two: #2c3e50;

    /* Texto */
    --text-main: #4b5563;
    --text-hero: #374151;
    --text-dark: #111827;
    --text-white: #ffffff;
    --text-nav: #868788;
    --text-nav-active: #439cc4;

    /* Escala de grises */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Acciones */
    --green-500: #22c55e;
    --green-600: #16a34a;
    --white: #ffffff;

    /* Sombras */
    --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);

    /* Layout */
    --max-width: 1310px;
    --px: 1.5rem;

    /* Espaciado base */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 40px;
    --space-4xl: 48px;

    /* Secciones */
    --section-pad-top: 32px;
    --section-pad-bottom: 12px;
    --section-gap: 32px;
    --section-gap-tight: 24px;
    --grid-gap: 32px;
    --footer-gap: 32px;
    --card-pad: 24px;
    --section-pad-right: 278px;
    --section-pad-left: 285px;

    /* Compatibilidad con clases ya existentes */
    --section-py: var(--section-pad-bottom);
    --section-py-two: var(--section-pad-top);
    --section-py-three: var(--space-3xl);
    --section-pb: var(--section-pad-bottom);
    --col-gap: var(--section-gap);
    --col-gap-form: var(--footer-gap);
    --block-mb: var(--section-gap);
    --h2-titles-mb: 1rem;

    /* Tipografía en rem */
    --fs-overline: 0.75rem;      /* 12px */
    --fs-caption-sm: 0.8125rem;  /* 13px */
    --fs-caption: 0.875rem;      /* 14px */
    --fs-body-sm: 0.9375rem;     /* 15px */
    --fs-body-md: 1rem;          /* 16px */
    --fs-body: 1.125rem;         /* 18px */
    --fs-body-lg: 1.25rem;       /* 20px */
    --fs-subtitle-lg: 1.375rem;  /* 22px */
    --fs-subtitle: 1.5rem;       /* 24px */
    --fs-title-sm: 1.625rem;     /* 26px */
    --fs-title-md: 1.75rem;      /* 28px */
    --fs-title-md-lg: 1.875rem;  /* 30px */
    --fs-title-lg: 2rem;         /* 32px */
    --fs-title-xl: 2.25rem;      /* 36px */
    --fs-hero: 2.39625rem;       /* 38.34px aprox */
    --fs-display: 3rem;          /* 48px */
    --fs-nav: var(--fs-body-lg);
    --fs-cta: var(--fs-subtitle);

    --lh-tight: 1.2;
    --lh-title: 1.3;
    --lh-copy: 1.5;

    /* Bordes */
    --radius-btn: 9999px;
    --radius-card: 12px;
    --radius-pill: 50px;

    /* Transiciones */
    --transition: 0.3s ease;

    --canvas-max-main: 1920px;
}