/* ============================================================
   HolaDoc! — Design Tokens (variables.css)
   Estilo Apicona — Corporativo / Médico / Profesional
   Paleta: Rojo Vibrante + Negro/Gris Oscuro + Blanco
   ============================================================ */

:root {
  /* -------------------------------------------------------
     COLOR — Brand Principal (Rojo Apicona)
     ------------------------------------------------------- */
  --primary:          #034C81;
  --primary-dark:     #023A63;
  --primary-light:    #0369A1;
  --primary-lightest: #EFF6FF;

  /* Mantiene compatibilidad con código existente */
  --primary-lighter:  #60A5FA;

  /* -------------------------------------------------------
     COLOR — Dark Surfaces (Negro Apicona)
     ------------------------------------------------------- */
  --dark-bg:      #1E1E1E;
  --dark-surface: #2A2A2A;
  --dark-border:  #3A3A3A;

  /* Secondary = verde para estados de éxito */
  --secondary:       #16A34A;
  --secondary-light: #22C55E;

  /* Accent = verde para completado */
  --accent:       #16A34A;
  --accent-light: #22C55E;

  /* -------------------------------------------------------
     COLOR — Semantic
     ------------------------------------------------------- */
  --warning:       #F59E0B;
  --warning-light: #FCD34D;

  --danger:        #E8291C;
  --danger-light:  #FCA5A5;

  --success:       #16A34A;
  --success-light: #22C55E;

  --info:          #2563EB;
  --info-light:    #93C5FD;

  /* -------------------------------------------------------
     COLOR — Backgrounds
     ------------------------------------------------------- */
  --bg-primary:     #F5F5F5;
  --bg-secondary:   #E8E8E8;
  --bg-surface:     #FFFFFF;
  --bg-glass:       rgba(255, 255, 255, 0.9);
  --bg-glass-heavy: rgba(255, 255, 255, 0.95);
  --bg-overlay:     rgba(0, 0, 0, 0.55);

  /* -------------------------------------------------------
     COLOR — Text
     ------------------------------------------------------- */
  --text-primary:   #1A1A1A;
  --text-secondary: #444444;
  --text-muted:     #666666;
  --text-inverse:   #FFFFFF;
  --text-link:      var(--primary);

  /* -------------------------------------------------------
     COLOR — Borders
     ------------------------------------------------------- */
  --border-light: #E0E0E0;
  --border-mid:   #CCCCCC;

  /* -------------------------------------------------------
     SHADOWS
     ------------------------------------------------------- */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.18);
  --shadow-3d:  0 8px 32px rgba(3, 76, 129, 0.18);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.08);

  /* -------------------------------------------------------
     BORDER RADIUS — Más recto, estilo corporativo
     ------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* -------------------------------------------------------
     SPACING — 8-point scale
     ------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* -------------------------------------------------------
     TYPOGRAPHY — Poppins — Corporativa y Limpia
     ------------------------------------------------------- */
  --font-family: 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;

  /* -------------------------------------------------------
     TYPOGRAPHY — Font weights
     ------------------------------------------------------- */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold: 800;

  /* -------------------------------------------------------
     TYPOGRAPHY — Line heights
     ------------------------------------------------------- */
  --leading-tight:   1.2;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* -------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------- */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -------------------------------------------------------
     Z-INDEX — Layer system
     ------------------------------------------------------- */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   50;
  --z-navbar:   100;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    2000;
  --z-tooltip:  3000;

  /* -------------------------------------------------------
     CONTAINER / LAYOUT
     ------------------------------------------------------- */
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 860px;
  --container-lg: 1100px;
  --container-xl: 1280px;

  --topbar-height:     40px;
  --navbar-height:     72px;
  --bottom-nav-height: 68px;
}