/* ==========================================================================
   GLAM FLOW STUDIO — Design Tokens
   Fuente: Manual de Marca Glam Flow (Camaleona Gráfica)
   ========================================================================== */

:root {
  /* ---- Paleta de marca (valores exactos del manual) ---- */
  --brand-rosa:   #EA9DB5;  /* Rosa suave  — femenino, amor propio, cercanía   */
  --brand-negro:  #1B1B1B;  /* Negro profundo — fuerza, seguridad, presencia   */
  --brand-dorado: #D4AF37;  /* Dorado vibrante — brillo interior, celebración  */
  --brand-gris:   #B7B7B7;  /* Gris neutro — sobriedad, versatilidad           */
  --brand-lila:   #D2A0F2;  /* Lila luminoso — creatividad, libertad, fluidez  */

  /* ---- Superficies (tema OSCURO dominante; rosa/dorado/blanco de acento) ---- */
  --color-bg:        #110C0E;  /* negro cálido — fondo base dominante          */
  --color-surface:   #1C1417;  /* tarjetas / secciones elevadas                */
  --color-surface-2: #251A1F;  /* superficie sobre superficie                  */
  --color-rosa-deep: #C87791;  /* rosa profundo para bandas de acento          */
  --color-negro:     var(--brand-negro);

  /* ---- Texto (claro sobre oscuro; rosa/dorado/blanco como acento) ---- */
  --color-text:        #F7ECEF;  /* texto principal, blanco cálido casi puro   */
  --color-text-muted:  #C6A0AC;  /* texto secundario (rosado grisáceo)         */
  --color-text-faint:  #8C6B74;  /* metadatos, captions                        */
  --color-on-accent:   #1B1B1B;  /* texto oscuro sobre botones rosa/dorado     */
  --color-on-dark:     var(--color-text); /* alias: ya no hay bandas más oscuras que el fondo */

  /* ---- Semánticos ---- */
  --color-primary:   var(--brand-rosa);
  --color-secondary: var(--brand-lila);
  --color-accent:    var(--brand-dorado);
  --color-border:    rgba(247, 236, 239, 0.14);
  --color-border-soft: rgba(247, 236, 239, 0.08);
  --color-ring:      var(--brand-rosa);
  --color-success:   #5FBE8B;
  --color-error:     #E06B5C;
  --color-accent-ink: #4A1A2E; /* vino profundo — acentos de texto sólidos sobre bandas claras */

  /* Degradados de marca (solo para superficies/botones, nunca para texto) */
  --grad-gold:  linear-gradient(120deg, #F4D67B 0%, var(--brand-dorado) 50%, #A9812A 100%);
  --grad-hero:  linear-gradient(165deg, #1B1417 0%, var(--color-bg) 55%, #170F12 100%);
  --grad-veil:  linear-gradient(180deg, rgba(17,12,14,0) 0%, rgba(17,12,14,0.6) 60%, var(--color-bg) 100%);

  /* ---- Tipografía ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* Títulos  */
  --font-ui:      'Raleway', 'Helvetica Neue', Arial, sans-serif;        /* Subtítulos/UI */
  --font-body:    'Lato', 'Helvetica Neue', Arial, sans-serif;           /* Cuerpo   */

  /* Escala tipográfica fluida (aumentada para mejor lectura sobre el fondo rosado) */
  --text-xs:   0.82rem;
  --text-sm:   0.96rem;
  --text-base: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  --text-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2.15rem);
  --text-2xl:  clamp(2.15rem, 1.5rem + 2.6vw, 3.4rem);
  --text-3xl:  clamp(2.75rem, 1.7rem + 4.6vw, 5.3rem);
  --text-hero: clamp(3.6rem, 1.6rem + 9vw, 10.5rem);

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.65;
  --tracking-wide: 0.18em;   /* para eyebrows y STUDIO */
  --tracking-mega: 0.32em;

  /* ---- Espaciado (ritmo 8pt) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-section: clamp(4.5rem, 3rem + 7vw, 11rem);

  /* ---- Radios ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Sombras / glow (más profundas y brillantes sobre fondo oscuro) ---- */
  --shadow-soft: 0 16px 44px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 12px 36px rgba(0, 0, 0, 0.5);
  --glow-rosa: 0 10px 50px rgba(234, 157, 181, 0.35);
  --glow-lila: 0 10px 50px rgba(210, 160, 242, 0.32);

  /* ---- Layout ---- */
  --container:  1200px;
  --container-narrow: 780px;
  --header-h: 112px;   /* aire extra bajo el isotipo: no debe tocar la línea divisoria */

  /* ---- Motion ---- */
  --dur-fast:   160ms;
  --dur-normal: 320ms;
  --dur-slow:   560ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  /* z-index scale */
  --z-base: 0;
  --z-sticky: 20;
  --z-header: 40;
  --z-overlay: 100;
  --z-modal: 1000;
}