/* ==========================================================================
   EVERYDAY TO SHINE — Design tokens
   Dirección visual: base marfil + tinta carbón, rosa Shine como acento,
   gradiente magenta→coral→ámbar reservado para "atmósfera", nunca como fondo.
   ========================================================================== */
:root {
  /* ---- Ink & paper ---- */
  --ink:        #17121A;
  --ink-2:      #453C48;
  --ink-3:      #837A8A;
  --ink-4:      #A9A1AE;
  --paper:      #FFFFFF;
  --paper-2:    #FCFAF8;   /* marfil */
  --paper-3:    #F6F0EC;   /* arena cálida */
  --line:       #EAE3E6;
  --line-2:     #DDD3D8;

  /* ---- Shine palette ---- */
  --blush:      #F9E4EC;
  --blush-2:    #F5D2DF;
  --nude:       #EFE1D8;
  --pink:       #EE3E80;   /* acento primario */
  --pink-hot:   #FF1B68;
  --pink-deep:  #D00A4E;
  --coral:      #FB7A4B;
  --amber:      #FBB040;
  --gold:       #BE9C4E;   /* solo hairlines / detalles diminutos */

  /* ---- Estado ---- */
  --success:    #1E7A5A;
  --warn:       #B4741A;
  --danger:     #C23434;

  /* ---- Gradientes ---- */
  --grad-shine:  linear-gradient(115deg, #FF1B68 0%, #EE3E80 34%, #FB7A4B 70%, #FBB040 100%);
  --grad-soft:   linear-gradient(115deg, #FFE9F0 0%, #FDE7EC 40%, #FBEDE2 100%);
  --grad-ink:    linear-gradient(180deg, rgba(23,18,26,.55) 0%, rgba(23,18,26,0) 45%);
  --bloom:       radial-gradient(60% 55% at 22% 12%, rgba(255,27,104,.10) 0%, rgba(255,27,104,0) 70%),
                 radial-gradient(50% 45% at 88% 78%, rgba(251,176,64,.12) 0%, rgba(251,176,64,0) 70%);

  /* ---- Tipografía ---- */
  --font-display: "Instrument Serif", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-micro:   0.6875rem;  /* 11 */
  --fs-xs:      0.75rem;    /* 12 */
  --fs-sm:      0.8125rem;  /* 13 */
  --fs-base:    0.9375rem;  /* 15 */
  --fs-md:      1.0625rem;  /* 17 */
  --fs-lg:      1.375rem;
  --fs-xl:      1.75rem;
  --fs-2xl:     2.25rem;
  --fs-3xl:     3rem;
  --fs-4xl:     4rem;
  --fs-hero:    clamp(2.4rem, 5vw, 4.4rem);
  --fs-section: clamp(1.9rem, 3.4vw, 3rem);

  --tracking-wide:  .14em;
  --tracking-wider: .22em;

  /* ---- Espaciado ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
  --section-y: clamp(56px, 8vw, 116px);

  /* ---- Layout ---- */
  --wrap:     1360px;
  --wrap-mid: 1120px;
  --wrap-text: 720px;
  --gutter:   clamp(18px, 4vw, 48px);
  --header-h: 76px;

  /* ---- Formas ---- */
  --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* ---- Sombras ---- */
  --sh-1: 0 1px 2px rgba(23,18,26,.04);
  --sh-2: 0 6px 24px -12px rgba(23,18,26,.18);
  --sh-3: 0 24px 60px -28px rgba(23,18,26,.30);
  --sh-glow: 0 10px 40px -18px rgba(238,62,128,.55);

  /* ---- Movimiento ---- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast:    .18s;
  --t-base:    .32s;
  --t-slow:    .6s;

  --z-header: 60; --z-drawer: 80; --z-overlay: 90; --z-toast: 100;
}

@media (max-width: 720px) { :root { --header-h: 62px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}