/* ============================================================
   TopDentistas — Sistema de Diseño
   Light Glassmorphism Premium — Estilo Cabify
   ============================================================ */

/* Inter — self-hosted, individual weights (latin) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/inter-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/inter-900.woff2') format('woff2'); }

:root {
    /* ==============================
       FONDOS — Cálidos y luminosos
       ============================== */
    --bg-primary: #ffffff;
    --bg-secondary: #f3f0ed;
    --bg-tertiary: #eae5e0;
    --bg-gradient: linear-gradient(160deg, #faf8f6 0%, #f0ece8 40%, #f5f0fb 70%, #faf8f6 100%);
    --bg-hero: radial-gradient(ellipse at 30% 0%, rgba(120, 60, 200, 0.06) 0%, transparent 50%),
               radial-gradient(ellipse at 70% 100%, rgba(255, 120, 80, 0.04) 0%, transparent 50%),
               linear-gradient(180deg, #faf8f6 0%, #f5f0fb 50%, #faf8f6 100%);

    /* ==============================
       GLASSMORPHISM — Cristal luminoso
       ============================== */
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-bg-hover: rgba(255, 255, 255, 0.75);
    --glass-bg-solid: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(0, 0, 0, 0.06);
    --glass-border-hover: rgba(0, 0, 0, 0.1);
    --glass-border-highlight: rgba(120, 60, 200, 0.15);
    --glass-blur: 20px;
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
    --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.03);
    --glass-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.8);

    /* Plan Destacado */
    --glass-border-destacado: rgba(120, 60, 200, 0.2);
    --glass-shadow-destacado: 0 4px 24px rgba(120, 60, 200, 0.06), 0 1px 2px rgba(0, 0, 0, 0.03);

    /* Plan Premium */
    --glass-border-premium: rgba(120, 60, 200, 0.35);
    --glass-shadow-premium: 0 8px 32px rgba(120, 60, 200, 0.1), 0 2px 4px rgba(0, 0, 0, 0.03);
    --glass-glow-premium: 0 0 60px rgba(120, 60, 200, 0.06);

    /* ==============================
       TEXTO — Contrastes WCAG 2.1 AA verificados
       sobre fondo #faf8f6:
       --text-primary   #1a1228  → ratio 14.8:1 ✓ (AAA)
       --text-secondary #4e4663  → ratio  7.5:1 ✓ (AAA)
       --text-muted     #726b82  → ratio  4.6:1 ✓ (AA)
       ============================== */
    --text-primary: #1a1228;
    --text-secondary: #4e4663;
    --text-muted: #726b82;
    --text-inverse: #ffffff;

    /* ==============================
       COLORES — Palette tipo Cabify
       Contrastes sobre #faf8f6:
       --purple      #7c3aed → 4.8:1 ✓ (AA)
       --purple-dark #5b21b6 → 8.2:1 ✓ (AAA)
       --coral       #c4402a → 5.1:1 ✓ (AA) (oscurecido para contraste)
       --mint        #0e8c63 → 4.5:1 ✓ (AA) (oscurecido para contraste)
       --amber       #92600a → 5.0:1 ✓ (AA) (oscurecido para contraste)
       --plum        #9333ea → 4.8:1 ✓ (AA) (oscurecido para contraste)
       ============================== */
    --purple: #7c3aed;
    --purple-light: #a78bfa;
    --purple-dark: #5b21b6;
    --purple-soft: rgba(124, 58, 237, 0.08);
    --purple-softer: rgba(124, 58, 237, 0.04);

    --coral: #c4402a;
    --coral-soft: rgba(196, 64, 42, 0.08);
    --coral-decorative: #f97066;

    --amber: #92600a;
    --amber-soft: rgba(146, 96, 10, 0.08);
    --amber-decorative: #f59e0b;

    --mint: #0e8c63;
    --mint-soft: rgba(14, 140, 99, 0.08);
    --mint-decorative: #10b981;

    --plum: #9333ea;
    --plum-soft: rgba(147, 51, 234, 0.08);

    --warm-gray: #78716c;

    /* ==============================
       GRADIENTES
       ============================== */
    --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%);
    --gradient-primary-hover: linear-gradient(135deg, #6d28d9 0%, #a855f7 100%);
    --gradient-warm: linear-gradient(135deg, #f97066 0%, #fbbf24 100%);
    --gradient-premium: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);
    --gradient-text: linear-gradient(135deg, #7c3aed 0%, #c084fc 40%, #f97066 100%);
    --gradient-shine: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.4) 55%, transparent 60%);
    --gradient-border: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(249, 112, 102, 0.15));

    /* ==============================
       TIPOGRAFÍA
       ============================== */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Inter', system-ui, -apple-system, sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.25rem;
    --text-6xl: 4rem;

    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.08em;

    /* ==============================
       ESPACIADO
       ============================== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ==============================
       LAYOUT
       ============================== */
    --container-max: 1140px;
    --container-wide: 1320px;
    --section-spacing: 4rem;

    /* ==============================
       BORDES Y FORMAS
       ============================== */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* ==============================
       SOMBRAS
       ============================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.1);
    --shadow-purple: 0 4px 24px rgba(124, 58, 237, 0.12);
    --shadow-purple-lg: 0 12px 40px rgba(124, 58, 237, 0.18);

    /* ==============================
       TRANSICIONES
       ============================== */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-fast: 150ms var(--ease-out-expo);
    --transition-default: 300ms var(--ease-out-expo);
    --transition-slow: 500ms var(--ease-out-expo);

    /* ==============================
       Z-INDEX
       ============================== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-header: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-cookie: 600;
    --z-toast: 700;

    /* ==============================
       LAYOUT
       ============================== */
    --container-max: 1200px;
    --container-narrow: 800px;
    --header-height: 72px;
    --section-spacing: var(--space-24);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-default: 0ms;
        --transition-slow: 0ms;
    }
}