/* ═══════════════════════════════════════════
   MIS COLORES Y COSAS QUE SE USAN EN TODO EL SITIO
   Aquí guardo los colores y medidas que voy a usar en muchas partes.
   Así si el jefe me pide cambiar un rosa, lo cambio aquí y listo.
   ═══════════════════════════════════════════ */

:root {
  /* Estos son los colores de la marca, los rosas que más uso */
  --pink-soft: #F2C4D0;
  --pink-main: #D4577A;
  --pink-dark: #B83F63;
  --pink-light: rgba(212, 87, 122, 0.08);
  --pink-glow: rgba(212, 87, 122, 0.25);
  --pink-muted: rgba(212, 87, 122, 0.05);

  /* Estos grises los uso para textos y fondos, no son negros puros */
  --white: #FAFBFC;
  --gray-50: #F6F7F9;
  --gray-100: #EDEEF2;
  --gray-200: #DDDFE5;
  --gray-300: #C5C8D2;
  --gray-400: #9498A6;
  --gray-500: #6C7080;
  --gray-600: #4D5163;
  --gray-700: #373B4D;
  --gray-800: #252839;
  --gray-900: #14162A;

  /* Otros colores para resaltar cosas como botones o avisos */
  --green-accent: #5DB87B;
  --green-light: rgba(93, 184, 123, 0.12);
  --wa-green: #25D366;
  --gold: #E8A838;
  --violet: #8B6CC8;
  --sky: #38BDF8;

  /* Los fondos de mis páginas y tarjetas */
  --body-bg: #F4F5F8;
  --surface-1: #FFFFFF;
  --surface-2: #F8F9FB;
  --surface-3: #F0F1F5;
  --card-bg: rgba(255, 255, 255, 0.72);
  --card-bg-solid: #FFFFFF;
  --footer-bg: #1B1E30;
  --footer-text: rgba(255, 255, 255, 0.65);

  /* Para que las tarjetas se vean como de vidrio transparente */
  --glass-bg: rgba(255, 255, 255, 0.32);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 8px 32px rgba(20, 22, 42, 0.06);
  --glass-blur: 14px;
  --glass-highlight: rgba(255, 255, 255, 0.7);

  /* Las sombras para que las cosas parezcan que flotan un poquito */
  --shadow-sm: 0 1px 3px rgba(20, 22, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 22, 42, 0.06), 0 1px 3px rgba(20, 22, 42, 0.04);
  --shadow-lg: 0 12px 28px rgba(20, 22, 42, 0.08), 0 4px 10px rgba(20, 22, 42, 0.04);
  --shadow-xl: 0 24px 48px rgba(20, 22, 42, 0.1), 0 8px 16px rgba(20, 22, 42, 0.06);

  /* Qué tan redonditas quiero las esquinas de mis cosas */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 9999px;
  --radius-full: 9999px;
  --radius-squircle: 22% / 50%;

  /* Medidas de mi página para que no se vea desordenada */
  --header-h: 68px;
  --container-w: 1200px;
  --container-w-wide: 1400px;

  /* Los tipos de letra y los tamaños, me dijeron que use clamp para que sea responsivo */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Outfit', 'Inter', sans-serif;

  --text-micro: clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);       /* 10-12px */
  --text-xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.8125rem);       /* 11-13px */
  --text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);          /* 12-14px */
  --text-body: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);           /* 14-16px */
  --text-body-lg: clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);   /* 15-18px */
  --text-h1: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);               /* 16-20px */
  --text-8: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);             /* 18-22px */
  --text-9: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);               /* 22-32px */
  --text-10: clamp(1.75rem, 1.4rem + 1.8vw, 3rem);               /* 28-48px */
  --text-hero: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);              /* 32-56px */

  /* El espacio entre líneas de texto */
  --leading-tight: 1.15;
  --leading-base: 1.5;
  --leading-loose: 1.75;

  /* Espacio entre las letras de mis palabras */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  /* Estas son mis animaciones y qué tan rápido cambian las cosas */
  --t-fast: 150ms;
  --t-med: 250ms;
  --t-normal: 300ms;
  --t-slow: 500ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Para cuando alguien usa el teclado para navegar, sepa dónde está parado */
  --focus-ring: 0 0 0 3px rgba(212, 87, 122, 0.35);
  --focus-ring-offset: 0 0 0 2px var(--body-bg), 0 0 0 4px var(--pink-main);

  /* El orden de las capas, para que nada se tape por error */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 1100;
  --z-corner-logo: 1050;
  --z-overlay: 4000;
  --z-drawer: 4100;
  --z-mobile-menu: 4100;
  --z-search: 5000;
  --z-loader: 9999;
  --z-toast: 6000;

  /* Colores para cuando algo sale mal o hay un error */
  --red-error: #E54444;
  --red-bg: #FEF2F2;
}

/* ═══════════════════════════════════════════
   TEMA OSCURO
   Aquí cambio mis colores para que no lastimen los ojos cuando es de noche.
   ═══════════════════════════════════════════ */
[data-theme="dark"] {
  --pink-soft: #E8AEBF;
  --pink-main: #E46B8E;
  --pink-dark: #C74E73;
  --pink-light: rgba(228, 107, 142, 0.12);
  --pink-glow: rgba(228, 107, 142, 0.25);
  --pink-muted: rgba(228, 107, 142, 0.06);

  --white: #1A1D30;
  --gray-50: #121424;
  --gray-100: #1A1D30;
  --gray-200: #262A42;
  --gray-300: #383D5C;
  --gray-400: #5A5F7A;
  --gray-500: #8B90A8;
  --gray-600: #AEB3CA;
  --gray-700: #CDD1E2;
  --gray-800: #E2E5F0;
  --gray-900: #F0F1F8;

  --green-accent: #5DB87B;
  --green-light: rgba(93, 184, 123, 0.14);

  --body-bg: #0C0E1C;
  --surface-1: #161830;
  --surface-2: #1A1D34;
  --surface-3: #1E2138;
  --card-bg: rgba(255, 255, 255, 0.035);
  --card-bg-solid: #181B30;
  --footer-bg: #080A16;
  --footer-text: rgba(255, 255, 255, 0.55);

  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --glass-highlight: rgba(255, 255, 255, 0.10);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.4);

  --focus-ring: 0 0 0 3px rgba(228, 107, 142, 0.4);
  --focus-ring-offset: 0 0 0 2px var(--body-bg), 0 0 0 4px var(--pink-main);

  --red-bg: rgba(229, 68, 68, 0.12);
}

/* ═══════════════════════════════════════════
   Si la pantalla es gigante (como una TV)
   Hago que todo se vea un poquito más grande para que se lea bien.
   ═══════════════════════════════════════════ */
@media (min-width: 1920px) {
  :root {
    --text-body: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
    --text-body-lg: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
    --text-h1: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
    --text-9: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
    --text-hero: clamp(2.5rem, 2rem + 1.5vw, 4rem);
    --container-w: 1400px;
  }
}