/* ==========================================================================
   variables.css — Sistema de diseño v2
   ritualesdebolsillo.com
   REGLA: cero valores hardcodeados fuera de este archivo.
   ========================================================================== */

:root {

  /* ==========================================================================
     1. COLORES BASE
     Dirección nueva: fondo blanco limpio. El color existe solo en los blobs.
     El fondo no compite, no textura, no distrae.
     ========================================================================== */

  --color-bg:               #FAFAFA;
  --color-bg-soft:          #F4F4F4;
  --color-bg-dim:           #E8E8E8;
  --color-bg-elevated:      rgba(255, 255, 255, 0.96);
  --color-bg-panel:         rgba(255, 255, 255, 0.98);
  --color-bg-glow:          rgba(255, 255, 255, 0.99);

  /* Texto — nunca negro puro */
  --color-text-primary:     #161313;
  --color-text-secondary:   #5A5050;
  --color-text-soft:        #A09490;
  --color-text-inverse:     #FAFAFA;

  /* Líneas y bordes */
  --color-border:           rgba(20, 16, 14, 0.10);
  --color-border-soft:      rgba(20, 16, 14, 0.05);
  --color-line-soft:        rgba(255, 255, 255, 0.50);
  --color-line-strong:      rgba(255, 255, 255, 0.70);

  /* Overlay */
  --color-overlay:          rgba(20, 16, 14, 0.44);
  --color-overlay-soft:     rgba(20, 16, 14, 0.18);

  /* Halos de ambiente — mínimos para no saturar el fondo blanco */
  --ambient-peach:          rgba(255, 184, 160, 0.08);
  --ambient-coral:          rgba(248, 118, 102, 0.06);
  --ambient-cyan:           rgba(142, 228, 241, 0.07);
  --ambient-violet:         rgba(164, 151, 235, 0.05);
  --ambient-gold:           rgba(255, 218, 148, 0.06);

  /* ==========================================================================
     2. COLORES POR EMOCIÓN — más saturados y vibrantes
     Principio: los blobs son el único color fuerte. Los tints son casi invisibles.
     Se aumenta la saturación de cada emoción para que los blobs tengan presencia
     real sobre el fondo blanco, tal como las referencias "perfecto en movimiento".
     ========================================================================== */

  /* --- EMOCIONES DIFÍCILES --- */

  /* saturada: periwinkle frío + violeta niebla + teal difuso */
  --emotion-saturada-1:     #7E72E8;
  --emotion-saturada-2:     #9A84F2;
  --emotion-saturada-3:     #6758D6;
  --emotion-saturada-tint:  rgba(126, 114, 232, 0.08);

  /* enfadada: índigo grisado + ciruela fría */
  --emotion-enfadada-1:     #C94A54;
  --emotion-enfadada-2:     #E0424C;
  --emotion-enfadada-3:     none;
  --emotion-enfadada-tint:  rgba(201, 74, 84, 0.08);

  /* sin foco: teal grisado + azul niebla */
  --emotion-sinfoco-1:      #D8DADF;
  --emotion-sinfoco-2:      #EEF0F4;
  --emotion-sinfoco-3:      none;
  --emotion-sinfoco-tint:   rgba(216, 218, 223, 0.08);

  /* triste: azul apagado + lavanda grisada */
  --emotion-triste-1:       #8196B0;
  --emotion-triste-2:       #A0AEC1;
  --emotion-triste-3:       none;
  --emotion-triste-tint:    rgba(129, 150, 176, 0.08);

  /* desconectada: lila humo + lavanda pálida */
  --emotion-desconectada-1: #AEB4C1;
  --emotion-desconectada-2: #D4D9E2;
  --emotion-desconectada-3: none;
  --emotion-desconectada-tint: rgba(174, 180, 193, 0.08);

  /* sin energía: azul grisado + lavanda fría */
  --emotion-sinenergia-1:   #CBBE73;
  --emotion-sinenergia-2:   #E0D8A6;
  --emotion-sinenergia-3:   none;
  --emotion-sinenergia-tint: rgba(203, 190, 115, 0.08);

  /* impotencia: azul acero + violeta polvo */
  --emotion-impotencia-1:   #8F7AAE;
  --emotion-impotencia-2:   #A694BF;
  --emotion-impotencia-3:   none;
  --emotion-impotencia-tint: rgba(143, 122, 174, 0.08);

  /* pequeña: rosa frío + malva claro */
  --emotion-pequena-1:      #E5BBC6;
  --emotion-pequena-2:      #F1D9DF;
  --emotion-pequena-3:      none;
  --emotion-pequena-tint:   rgba(229, 187, 198, 0.08);

  /* --- EMOCIONES FÉRTILES --- */

  /* en calma: durazno pálido + concha rosada + rosa aire */
  --emotion-encalma-1:      #9ED9CF;
  --emotion-encalma-2:      #C3ECE5;
  --emotion-encalma-3:      #7CCCBF;
  --emotion-encalma-tint:   rgba(158, 217, 207, 0.08);

  /* con ganas: peach luminoso + coral cálido */
  --emotion-conganas-1:     #F19A7E;
  --emotion-conganas-2:     #EA6E62;
  --emotion-conganas-3:     none;
  --emotion-conganas-tint:  rgba(241, 154, 126, 0.08);

  /* curiosa: albaricoque claro + rosa coral */
  --emotion-curiosa-1:      #E9D44A;
  --emotion-curiosa-2:      #F0C94E;
  --emotion-curiosa-3:      none;
  --emotion-curiosa-tint:   rgba(233, 212, 74, 0.08);

  /* conectada: blush cálido + miel clara */
  --emotion-conectada-1:    #6FC5B8;
  --emotion-conectada-2:    #91DED0;
  --emotion-conectada-3:    none;
  --emotion-conectada-tint: rgba(111, 197, 184, 0.08);

  /* agradecida: rosa cálido + peach suave + coral claro */
  --emotion-agradecida-1:   #D8B35E;
  --emotion-agradecida-2:   #E9CD86;
  --emotion-agradecida-3:   #C79F46;
  --emotion-agradecida-tint: rgba(216, 179, 94, 0.08);

  /* ==========================================================================
     3. TIPOGRAFÍA
     Títulos más grandes, interlineado más cómodo, jerarquía más marcada.
     ========================================================================== */

  /* Familias — máximo 2 */
  --font-display:   'Playfair Display', Georgia, serif;
  --font-ui:        'DM Sans', system-ui, -apple-system, sans-serif;

  /* Escala — títulos con más presencia */
  --text-xs:        0.75rem;    /* 12px */
  --text-sm:        0.875rem;   /* 14px */
  --text-base:      1rem;       /* 16px */
  --text-md:        1.125rem;   /* 18px */
  --text-lg:        1.25rem;    /* 20px */
  --text-xl:        1.5rem;     /* 24px */
  --text-2xl:       2.125rem;   /* 34px  — era 32px */
  --text-3xl:       2.875rem;   /* 46px  — era 42px */
  --text-4xl:       3.75rem;    /* 60px  — era 56px */
  --text-hero:      5rem;       /* 80px  — solo desktop */

  /* Pesos */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* Interlineado — más aireado y cómodo */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-base:   1.60;   /* era 1.55 */
  --leading-loose:  1.85;   /* era 1.80 */

  /* Espaciado entre letras */
  --tracking-tight: -0.025em;  /* era -0.02em */
  --tracking-base:   0;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.05em;
  --tracking-widest: 0.09em;
  --tracking-label:  0.07em;

  /* ==========================================================================
     4. ESPACIADO — múltiplos de 4/8px
     El sistema ya era correcto. Se mantiene sin cambios.
     ========================================================================== */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Padding de pantalla — mínimo 24px garantizado */
  --screen-padding-x:       24px;
  --screen-padding-y:       32px;
  --screen-padding-x-lg:    48px;
  --screen-padding-y-lg:    64px;

  /* ==========================================================================
     5. RADIOS DE BORDE
     ========================================================================== */

  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    16px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --radius-2xl:   48px;
  --radius-full:  9999px;

  /* Formas orgánicas para blobs */
  --blob-shape-a: 60% 40% 55% 45% / 50% 60% 40% 55%;
  --blob-shape-b: 40% 60% 45% 55% / 60% 40% 55% 45%;
  --blob-shape-c: 50% 50% 60% 40% / 45% 55% 50% 50%;
  --blob-shape-d: 55% 45% 40% 60% / 55% 45% 60% 40%;

  /* ==========================================================================
     6. SOMBRAS — más limpias sobre fondo blanco
     ========================================================================== */

  --shadow-xs:    0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-sm:    0 4px 16px rgba(0, 0, 0, 0.07);
  --shadow-md:    0 12px 32px rgba(0, 0, 0, 0.10);
  --shadow-lg:    0 20px 48px rgba(0, 0, 0, 0.13);
  --shadow-xl:    0 32px 80px rgba(0, 0, 0, 0.15);
  --shadow-blob:  0 24px 64px rgba(80, 60, 50, 0.16);
  --shadow-glow:  0 0 0 1px rgba(255, 255, 255, 0.12), 0 16px 48px rgba(0, 0, 0, 0.07);

  /* ==========================================================================
     7. TRANSICIONES — más lentas, ease-in-out como estándar
     Regla: cada transición es un pasaje de estado, no un cambio técnico.
     ========================================================================== */

  /* Duraciones — base sube a 400ms */
  --duration-instant:   80ms;
  --duration-fast:      150ms;
  --duration-base:      400ms;   /* era 300ms */
  --duration-slow:      600ms;   /* era 500ms */
  --duration-slower:    800ms;   /* era 700ms */
  --duration-slowest:   1200ms;  /* era 1000ms */
  --duration-blob:      5200ms;
  --duration-screen:    400ms;
  --duration-open:      700ms;   /* era 600ms */
  --duration-expand:    900ms;   /* era 800ms */

  /* Easings */
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0.0, 1.0, 1);
  --ease-in-out:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-organic:  cubic-bezier(0.34, 1.20, 0.64, 1);
  --ease-soft:     cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Transiciones compuestas — ease-in-out como estándar */
  --transition-fast:    var(--duration-fast)   var(--ease-in-out);
  --transition-base:    var(--duration-base)   var(--ease-in-out);
  --transition-slow:    var(--duration-slow)   var(--ease-in-out);
  --transition-screen:  var(--duration-screen) var(--ease-in-out);
  --transition-blob:    var(--duration-blob)   var(--ease-organic);
  --transition-expand:  var(--duration-expand) var(--ease-in-out);

  /* ==========================================================================
     8. BLOBS
     Núcleo más definido (menos blur en sm/md), halo exterior más suave.
     El blob de fondo es casi invisible para no contaminar el fondo blanco.
     ========================================================================== */

  /* Tamaños — ligeramente mayores para más presencia */
  --blob-size-xl:   480px;
  --blob-size-lg:   320px;
  --blob-size-md:   200px;
  --blob-size-sm:   116px;
  --blob-size-xs:    60px;

  /* Opacidad */
  --blob-opacity-rest:      0.88;
  --blob-opacity-hover:     1;
  --blob-opacity-selected:  1.00;
  --blob-opacity-bg:        0.26;   /* era 0.38 — más sutil en fondo blanco */

  /* Blur — núcleo más nítido, halo exterior suave */
  --blob-blur:      0px;
  --blob-filter-sm: blur(4px);    /* era 8px — más definido */
  --blob-filter-md: blur(14px);   /* era 18px */
  --blob-filter-lg: blur(44px);   /* era 48px */
  --blob-outline-width:     1px;
  --blob-outline-color:     rgba(255, 255, 255, 0.20);
  --blob-outline-strong:    rgba(255, 255, 255, 0.36);
  --blob-wave-opacity:      0.48;
  --blob-wave-scale:        1.22;

  --blob-blend:     multiply;

  --blob-float-x:   20px;
  --blob-float-y:   24px;

  /* ==========================================================================
     9. TIMER CIRCULAR
     ========================================================================== */

  --timer-size:             220px;
  --timer-radius:           96px;
  --timer-circumference:    603.19px;
  --timer-stroke-width:     3px;
  --timer-stroke-bg:        var(--color-border);
  --timer-stroke-active:    currentColor;
  --timer-stroke-linecap:   round;

  --timer-text-size:        var(--text-2xl);
  --timer-text-family:      var(--font-display);

  /* ==========================================================================
     10. REPRODUCTOR DE AUDIO
     ========================================================================== */

  --player-height:          72px;
  --player-padding:         var(--space-5);
  --player-radius:          var(--radius-xl);
  --player-bg:              rgba(255, 255, 255, 0.90);
  --player-backdrop-blur:   blur(20px);

  --player-bar-height:      3px;
  --player-bar-radius:      var(--radius-full);
  --player-bar-bg:          var(--color-border);
  --player-bar-fill:        currentColor;

  --player-btn-size:        44px;
  --player-btn-radius:      var(--radius-full);
  --player-btn-bg:          var(--color-text-primary);
  --player-btn-color:       var(--color-bg);

  --player-pulse-size:      56px;
  --player-pulse-opacity:   0.12;
  --player-pulse-duration:  2200ms;

  /* ==========================================================================
     11. BOTONES
     Primario: color con presencia, limpio. Secundario: sutil, no compite.
     ========================================================================== */

  /* Primario */
  --btn-primary-bg:         #161313;
  --btn-primary-color:      #FAFAFA;
  --btn-primary-radius:     var(--radius-full);
  --btn-primary-padding:    var(--space-4) var(--space-10);
  --btn-primary-font-size:  var(--text-md);
  --btn-primary-weight:     var(--weight-medium);

  /* Secundario / ghost */
  --btn-secondary-bg:       rgba(255, 255, 255, 0.72);
  --btn-secondary-color:    var(--color-text-primary);
  --btn-secondary-border:   1.5px solid var(--color-border);
  --btn-secondary-radius:   var(--radius-full);

  /* Botón emoción */
  --btn-emotion-size:       var(--blob-size-md);
  --btn-emotion-radius:     var(--blob-shape-a);

  /* Chips de duración */
  --btn-duration-padding:   var(--space-4) var(--space-8);
  --btn-duration-radius:    var(--radius-full);
  --btn-duration-border:    1.5px solid var(--color-border);
  --btn-duration-active-bg: var(--color-text-primary);
  --btn-duration-active-color: var(--color-text-inverse);
  --field-min-height:       52px;
  --field-textarea-min-height: 152px;
  --field-padding:          var(--space-4) var(--space-5);
  --field-radius:           var(--surface-radius);
  --field-bg:               linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.34) 100%);
  --field-border:           var(--surface-stroke);
  --field-shadow:           var(--surface-shadow);
  --field-placeholder:      var(--color-text-soft);

  /* ==========================================================================
     12. LAYOUT Y BREAKPOINTS
     ========================================================================== */

  --app-max-width:          430px;
  --desktop-max-width:      1200px;
  --desktop-col-content:    520px;

  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* ==========================================================================
     13. Z-INDEX
     ========================================================================== */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-blob:     15;
  --z-content:  20;
  --z-controls: 30;
  --z-player:   40;
  --z-overlay:  50;
  --z-modal:    60;
  --z-top:     100;

  /* ==========================================================================
     14. FRASCO DE DONACIONES
     ========================================================================== */

  --jar-width:          80px;
  --jar-height:         120px;
  --jar-width-sm:       86px;
  --jar-height-sm:      118px;
  --jar-width-lg:       132px;
  --jar-height-lg:      180px;
  --jar-stroke:         1.5px;
  --jar-stroke-color:   var(--color-text-primary);
  --jar-fill-color:     var(--emotion-agradecida-1);
  --jar-fill-opacity:   0.70;
  --jar-anim-duration:  1200ms;
  --jar-glass-fill:     rgba(255, 255, 255, 0.32);
  --jar-glass-stroke:   rgba(255, 255, 255, 0.64);
  --jar-highlight:      rgba(255, 255, 255, 0.62);
  --jar-liquid-shadow:  rgba(220, 168, 56, 0.18);
  --jar-cap-fill:       rgba(255, 255, 255, 0.74);
  --jar-cap-stroke:     rgba(20, 16, 14, 0.12);

  /* ==========================================================================
     15. MEDITACION
     ========================================================================== */

  --meditation-accent-1:    var(--emotion-encalma-2);
  --meditation-accent-2:    var(--emotion-encalma-3);
  --meditation-accent-3:    var(--emotion-conectada-1);
  --meditation-tint:        rgba(136, 200, 228, 0.14);
  --meditation-tint-soft:   rgba(170, 160, 212, 0.12);
  --meditation-surface:     linear-gradient(180deg, rgba(255,255,255,0.84) 0%, rgba(255,255,255,0.62) 100%);
  --meditation-outline:     1px solid rgba(136, 200, 228, 0.22);

  /* ==========================================================================
     15. APERTURA DE TEXTO (línea a línea)
     ========================================================================== */

  --text-reveal-delay:  120ms;
  --text-reveal-dur:    600ms;   /* era 500ms */
  --text-reveal-ease:   var(--ease-in-out);

  /* ==========================================================================
     16. PANTALLA DE RITUAL ACTIVO
     ========================================================================== */

  --ritual-bg-color:    var(--color-bg);
  --ritual-text-color:  var(--color-text-primary);

  --ritual-instruction-max-width:  320px;
  --ritual-instruction-font-size:  var(--text-lg);
  --ritual-instruction-leading:    var(--leading-loose);

  /* Tinte de emoción — lo sobrescribe JS con los colores reales */
  --ritual-tint-1:  rgba(136, 200, 228, 0.60);
  --ritual-tint-2:  rgba(170, 160, 212, 0.50);
  --ritual-tint-3:  rgba(136, 200, 228, 0.40);

  /* ==========================================================================
     17. ATMÓSFERA GLOBAL — silenciosa, sin competir con los blobs
     ========================================================================== */

  --ambient-grid-opacity:   0.06;   /* era 0.22 — casi invisible */
  --ambient-panel-blur:     blur(16px);
  --surface-stroke:         1px solid rgba(255, 255, 255, 0.44);
  --surface-shadow:         var(--shadow-glow);
  --surface-radius:         28px;
  --glass-bg-soft:          rgba(255, 255, 255, 0.42);
  --glass-bg-medium:        rgba(255, 255, 255, 0.62);
  --glass-bg-strong:        rgba(255, 255, 255, 0.82);
  --glass-border:           1px solid rgba(255, 255, 255, 0.46);
  --glass-border-strong:    1px solid rgba(20, 16, 14, 0.10);
  --glass-blur-sm:          blur(10px);
  --glass-blur-md:          blur(14px);
  --glass-blur-lg:          blur(18px);
  --focus-ring:             0 0 0 3px rgba(136, 200, 228, 0.24);
  --focus-ring-strong:      0 0 0 4px rgba(170, 160, 212, 0.20);
  --action-size:            44px;
  --card-action-size:       44px;
  --content-max-readable:   38rem;
  --content-max-narrow:     30rem;
  --content-max-wide:       52rem;


  /* ==========================================================================
     18. TAB BAR DE NAVEGACIÓN GLOBAL
     ========================================================================== */

  --tab-bar-height:       72px;
  --tab-bar-padding-x:    var(--space-6);
  --tab-bar-bg:           rgba(255, 255, 255, 0.84);
  --tab-bar-blur:         blur(24px);
  --tab-bar-border:       1px solid rgba(255, 255, 255, 0.64);
  --tab-bar-shadow:       0 8px 32px rgba(0, 0, 0, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.90);
  --tab-bar-radius:       999px;
  --tab-bar-item-size:    44px;
  --tab-bar-cta-size:     56px;
  --tab-bar-offset:       calc(var(--tab-bar-height) + var(--space-8));
  --cta-orb-bg:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,0.72) 0%, transparent 26%),
    radial-gradient(circle at 72% 76%, rgba(255,255,255,0.16) 0%, transparent 34%),
    linear-gradient(145deg,
      var(--emotion-conganas-1) 0%,
      var(--emotion-agradecida-2) 34%,
      var(--emotion-encalma-2) 70%,
      var(--emotion-desconectada-1) 100%);
  --cta-orb-shadow:
    0 12px 28px rgba(238, 184, 144, 0.32),
    0 4px 12px rgba(170, 160, 212, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.46);
  --cta-orb-shadow-hero:
    0 18px 38px rgba(238, 184, 144, 0.34),
    0 8px 22px rgba(136, 200, 228, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.56);
  --cta-orb-shadow-library:
    0 14px 30px rgba(136, 200, 228, 0.18),
    0 6px 16px rgba(170, 160, 212, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);

}