/* Sam Skincare · Design tokens — rediseño Día 11 (MoE UX/UI/Neuroventas).
   Paleta cream + rose + gold · cálido luxe × cinematic editorial. */

:root {
  /* ─── PRIMITIVES ─────────────────────────────────────── */
  /* Cream (warm neutral base) */
  --c-cream-50:  #fffaf5;
  --c-cream-100: #fdf3e8;
  --c-cream-200: #f8e7d4;
  --c-cream-300: #efd4b5;
  --c-cream-400: #e3bd95;
  --c-cream-500: #d4a47a;
  --c-cream-600: #b8855e;
  --c-cream-700: #8f6748;
  --c-cream-800: #624734;
  --c-cream-900: #3a2a1f;

  /* Rose (skin-warm pink · brand signature) */
  --c-rose-50:  #fdf2f2;
  --c-rose-100: #fce4e4;
  --c-rose-200: #f7c7c7;
  --c-rose-300: #eea6a6;
  --c-rose-400: #e08585;
  --c-rose-500: #d36b6b;
  --c-rose-600: #b85050;
  --c-rose-700: #933e3e;
  --c-rose-800: #6e2f2f;
  --c-rose-900: #4a2020;

  /* Terracotta (CTA + accent) */
  --c-terra-300: #e89b7e;
  --c-terra-500: #c97b63;
  --c-terra-600: #a85e47;
  --c-terra-700: #844532;

  /* Gold (luxury accent) */
  --c-gold-300: #e9c759;
  --c-gold-400: #d4a93a;
  --c-gold-500: #b88a26;
  --c-gold-600: #946a1c;

  /* Charcoal (text/ink) */
  --c-charcoal-50:  #f6f5f4;
  --c-charcoal-100: #e8e6e3;
  --c-charcoal-200: #cfcbc5;
  --c-charcoal-300: #a8a19a;
  --c-charcoal-400: #7a716a;
  --c-charcoal-500: #544c46;
  --c-charcoal-600: #3b342f;
  --c-charcoal-700: #28231f;
  --c-charcoal-800: #1a1614;
  --c-charcoal-900: #0f0c0a;

  /* Sage / Coral states */
  --c-sage-500: #7a9979;
  --c-coral-500: #e07856;

  /* ─── SEMANTIC ────────────────────────────────────────── */
  --c-bg:           var(--c-cream-50);
  --c-surface:      #ffffff;
  --c-surface-alt:  var(--c-cream-100);
  --c-text:         var(--c-charcoal-800);
  --c-text-mute:    var(--c-charcoal-500);
  --c-text-soft:    var(--c-charcoal-400);
  --c-accent:       var(--c-rose-500);
  --c-accent-strong:var(--c-rose-600);
  --c-cta:          var(--c-terra-500);
  --c-cta-hover:    var(--c-terra-600);
  --c-success:      var(--c-sage-500);
  --c-success-bg:   #e9f7ec;
  --c-danger:       var(--c-coral-500);
  --c-danger-bg:    #fdecec;
  --c-error:        #a83232;
  --c-error-bg:     #fdecec;
  --c-warning:      var(--c-gold-600);
  --c-warning-bg:   #fff4e0;
  --c-border:       var(--c-cream-200);
  --c-overlay:      rgba(15,12,10,.55);

  /* ─── LEGACY ALIASES (no romper código existente) ────── */
  --c-gold:        var(--c-gold-500);
  --c-gold-soft:   var(--c-gold-300);
  --c-gold-deep:   var(--c-gold-600);
  --c-cream:       var(--c-cream-50);
  --c-cream-2:     var(--c-cream-100);
  --c-cream-3:     var(--c-cream-200);
  --c-brown:       var(--c-charcoal-800);
  --c-brown-soft:  var(--c-charcoal-500);
  --c-brown-mute:  var(--c-charcoal-400);
  --c-pink-dust:   var(--c-rose-200);
  --c-white:       #ffffff;
  --c-white-90:    rgba(255,255,255,0.9);

  /* ─── TIPOGRAFÍA ──────────────────────────────────────── */
  --font-serif: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Modular scale 1.25 · mobile-first */
  --fs-2xs:  0.6875rem;   /* 11 */
  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.875rem;    /* 14 */
  --fs-base: 1rem;        /* 16 */
  --fs-md:   1.125rem;    /* 18 */
  --fs-lg:   1.375rem;    /* 22 */
  --fs-xl:   1.75rem;     /* 28 */
  --fs-2xl:  2.25rem;     /* 36 */
  --fs-3xl:  3rem;        /* 48 */
  --fs-4xl:  3.75rem;     /* 60 */
  --fs-display: clamp(2.25rem, 7vw, 4.5rem);

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-eyebrow:  0.12em;

  /* ─── SPACING (escala 4) ──────────────────────────────── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-5:   1.25rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-10:  2.5rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;

  /* ─── LAYOUT ──────────────────────────────────────────── */
  --container-narrow:  36rem;
  --container-base:    48rem;
  --container-wide:    64rem;
  --container-max:     76rem;

  /* ─── RADIUS ──────────────────────────────────────────── */
  --r-sm:   0.25rem;
  --r-md:   0.5rem;
  --r-lg:   1rem;        /* 16 */
  --r-xl:   1.5rem;      /* 24 */
  --r-2xl:  1.75rem;     /* 28 */
  --r-pill: 9999px;

  /* ─── SHADOW (soft long-throw) ────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(20,14,10,.04);
  --shadow-md:   0 8px 24px rgba(20,14,10,.08);
  --shadow-lg:   0 24px 48px rgba(20,14,10,.12);
  --shadow-xl:   0 32px 64px -16px rgba(20,14,10,.18);
  --shadow-cta:  0 12px 28px -8px rgba(201,123,99,.45);
  --shadow-glow: 0 0 32px rgba(232,155,126,.4);

  /* ─── MOTION ──────────────────────────────────────────── */
  --ease:        cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:    cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 400ms;
  --t-page: 700ms;

  /* ─── Z-INDEX ────────────────────────────────────────── */
  --z-sticky:  50;
  --z-modal:  100;
  --z-toast:  200;
}