/* ============================================================================
   tokens.css — AromatizaPro · "Rosa & Grafito"
   Identidad: Luxury Minimal + Editorial Premium. Marca BLOQUEADA: magenta/rosa,
   sakura, loto. Base clara blush + secciones grafito dramáticas.
   ========================================================================== */
:root{
  /* ---- MARCA -------------------------------------------------------------- */
  --magenta:      #E11383;   /* rosa-magenta de marca (PRO / CTA)      */
  --magenta-deep: #B4005F;   /* magenta profundo (hover / degradados)  */
  --magenta-soft: #F06CB0;   /* rosa medio                             */
  --rose:         #F49CC4;   /* rosa sakura                            */
  --sakura:       #F9CEE0;   /* pétalo claro                           */
  --blush:        #FDEEF5;   /* superficie rosa muy clara              */
  --blush-2:      #FBE1EC;   /* segundo nivel rosa                     */
  --ink:          #1A0B12;   /* grafito cálido casi-negro (titulares)  */

  /* ---- PALETA CLARA (base de página) ------------------------------------- */
  --bg:        #FFFCFD;   /* fondo página            */
  --surface:   #FFFFFF;   /* tarjetas / paneles      */
  --surface-2: #FDEEF5;   /* segundo nivel           */
  --text:      #2A1620;   /* texto principal         */
  --muted:     #8A6C78;   /* texto secundario        */
  --line:      rgba(26,11,18,.10); /* bordes/divisores */
  --accent:    #E11383;   /* acento de marca         */
  --accent-2:  #B4005F;   /* acento secundario       */
  --accent-ink:#FFFFFF;   /* texto SOBRE el acento (contraste AA) */
  --footer-bg: #17070F;
  --footer-text:#F3DDE8;

  /* ---- PALETA OSCURA (secciones grafito .band-dark) ---------------------- */
  --dk-bg:     #150710;   /* fondo oscuro                */
  --dk-surface:#22101B;   /* tarjeta sobre oscuro        */
  --dk-text:   #FBEDF4;   /* texto claro                 */
  --dk-muted:  #C79FB2;   /* secundario claro            */
  --dk-line:   rgba(255,255,255,.12);

  /* ---- TIPOGRAFÍA -------------------------------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script:  "Dancing Script", "Segoe Script", cursive;

  /* escala fluida (clamp: min, ideal-vw, max) */
  --fs-900: clamp(2.8rem, 7vw, 5.8rem);  /* display hero (serif, grande) */
  --fs-800: clamp(2.4rem, 5.2vw, 4.2rem);/* h2 sección     */
  --fs-700: clamp(1.6rem, 3vw, 2.4rem);  /* h3             */
  --fs-600: clamp(1.15rem,1.6vw,1.4rem); /* lead           */
  --fs-500: 1.0625rem;                    /* body           */
  --fs-400: .9375rem;                     /* small          */
  --fs-300: .78rem;                       /* caption/label  */
  --lh-tight: 1.02;
  --lh-snug:  1.28;
  --lh-body:  1.72;
  --tracking-label: .26em;                /* mayúsculas espaciadas (luxury) */
  --weight-display: 600;
  --weight-strong: 600;

  /* ---- ESPACIADO / RITMO ------------------------------------------------- */
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --space-5:3rem;  --space-6:4.5rem; --space-7:7rem; --space-8:10rem;
  --container: 1220px;
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  --section-y: clamp(3.25rem, 6.5vw, 6rem);

  /* ---- FORMA ------------------------------------------------------------- */
  --radius-sm:10px; --radius:16px; --radius-lg:26px; --radius-pill:999px;
  --border:1px solid var(--line);
  --shadow-sm:0 4px 14px -6px rgba(180,0,95,.20);
  --shadow:   0 26px 60px -30px rgba(120,10,70,.35);
  --shadow-lg:0 50px 100px -40px rgba(120,10,70,.42);
  --glow:     0 0 0 1px rgba(225,19,131,.18), 0 24px 60px -22px rgba(225,19,131,.45);

  /* ---- MOVIMIENTO -------------------------------------------------------- */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-inout: cubic-bezier(.76,0,.24,1);
  --dur-fast:.28s; --dur:.55s; --dur-slow:.95s;

  /* ---- CAPAS ------------------------------------------------------------- */
  --z-petals:1; --z-nav:50; --z-overlay:80; --z-modal:100;

  /* gradientes de marca reutilizables */
  --grad-magenta: linear-gradient(120deg, var(--magenta) 0%, var(--magenta-deep) 100%);
  --grad-rose:    linear-gradient(120deg, var(--magenta-soft) 0%, var(--magenta) 100%);
}