/* ============================================================
   Kiss Me Box — Design Tokens
   Color e identidad: marca real (logo negro + lila).
   Escala numérica (espaciado, radios, sombras, motion, breakpoints):
   estructura tomada de C:\Proyectos\designSystem\docs (Dinet DS),
   sin sus colores ni tipografía corporativa.
   ============================================================ */

:root {
  /* ---- Primitivos: plum (marca) ---- */
  --kmb-plum-50:  #F8F1FB;
  --kmb-plum-100: #F1E6F7;
  --kmb-plum-200: #E3CDF0;
  --kmb-plum-300: #CBA6E0;
  --kmb-plum-400: #A97FC4;
  --kmb-plum-500: #8B5FAC;
  --kmb-plum-600: #6E3F8F;
  --kmb-plum-700: #532F6C;
  --kmb-plum-800: #382048;
  --kmb-plum-900: #1C1420;

  /* ---- Primitivos: gris neutro (con sesgo plum, no gris puro) ---- */
  --kmb-gray-50:  #FBF9FC;
  --kmb-gray-100: #F3EFF6;
  --kmb-gray-200: #E7DEEF;
  --kmb-gray-300: #D3C6DE;
  --kmb-gray-400: #AFA0BC;
  --kmb-gray-500: #8A7B97;
  --kmb-gray-600: #6E5F78;
  --kmb-gray-700: #4C4053;
  --kmb-gray-800: #2E2536;
  --kmb-gray-900: #1C1420;

  /* ---- Utilidad (no cuentan como acento de marca) ---- */
  --kmb-whatsapp:       #25D366;
  --kmb-whatsapp-hover: #1DA851;
  --kmb-gold:           #C9A227; /* opción de color "Dorado" en personalización */

  /* ---- Semántico: estado ---- */
  --status-error:       #B3455C;
  --status-error-bg:    #FBEAEF;
  --status-error-text:  #8A2F45;
  --status-success:     #3F8465;
  --status-success-bg:  #E7F3EC;
  --status-success-text:#285C41;

  /* ---- Semántico: superficie / texto / borde (tema claro) ---- */
  --bg-app:         var(--kmb-gray-50);
  --bg-surface:     #FFFFFF;
  --bg-surface-2:   var(--kmb-gray-100);
  --bg-header:      rgba(255,255,255,.92);
  --bg-overlay:     rgba(28,20,32,.55);

  --text-primary:   var(--kmb-gray-900);
  --text-secondary: var(--kmb-gray-600);
  --text-faint:     var(--kmb-gray-500);
  --text-inverse:   #FFFFFF;

  --border-default: var(--kmb-gray-200);
  --border-input:   var(--kmb-gray-300);
  --border-focus:   var(--kmb-plum-500);

  --action-primary:         var(--kmb-plum-600);
  --action-primary-hover:   var(--kmb-plum-700);
  --action-primary-active:  var(--kmb-plum-800);
  --action-primary-text:    #FFFFFF;

  --action-secondary-bg:      var(--bg-surface);
  --action-secondary-border:  var(--kmb-gray-300);
  --action-secondary-hover:   var(--kmb-gray-100);

  --accent-pale:    var(--kmb-plum-100);
  --accent-text:    var(--kmb-plum-600);

  --shadow-tint: 28,20,32; /* rgb base para sombras con sesgo plum, no negro puro */
  --shadow-xs: 0 1px 2px rgba(var(--shadow-tint), .06);
  --shadow-sm: 0 1px 3px rgba(var(--shadow-tint), .10), 0 1px 2px rgba(var(--shadow-tint), .06);
  --shadow-md: 0 4px 6px rgba(var(--shadow-tint), .08), 0 2px 4px rgba(var(--shadow-tint), .06);
  --shadow-lg: 0 10px 20px rgba(var(--shadow-tint), .12), 0 4px 8px rgba(var(--shadow-tint), .06);
  --shadow-xl: 0 20px 32px rgba(var(--shadow-tint), .16), 0 8px 12px rgba(var(--shadow-tint), .06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-app:        #16111C;
    --bg-surface:    #1E1826;
    --bg-surface-2:  #271F30;
    --bg-header:     rgba(22,17,28,.85);
    --bg-overlay:    rgba(0,0,0,.65);

    --text-primary:   #F3EDF8;
    --text-secondary: #BCADC9;
    --text-faint:     #8A7B97;
    --text-inverse:   #1C1420;

    --border-default: #362B42;
    --border-input:   #46394F;
    --border-focus:   var(--kmb-plum-300);

    --action-primary:        var(--kmb-plum-300);
    --action-primary-hover:  var(--kmb-plum-200);
    --action-primary-active: var(--kmb-plum-100);
    --action-primary-text:   #1C1420;

    --action-secondary-bg:     #1E1826;
    --action-secondary-border: #46394F;
    --action-secondary-hover:  #271F30;

    --accent-pale: #2B2233;
    --accent-text: var(--kmb-plum-300);

    --status-error-bg:   #3A2029;
    --status-success-bg: #1E2E27;

    --shadow-tint: 0,0,0;
  }
}
:root[data-theme="dark"] {
  --bg-app:        #16111C;
  --bg-surface:    #1E1826;
  --bg-surface-2:  #271F30;
  --bg-header:     rgba(22,17,28,.85);
  --bg-overlay:    rgba(0,0,0,.65);

  --text-primary:   #F3EDF8;
  --text-secondary: #BCADC9;
  --text-faint:     #8A7B97;
  --text-inverse:   #1C1420;

  --border-default: #362B42;
  --border-input:   #46394F;
  --border-focus:   var(--kmb-plum-300);

  --action-primary:        var(--kmb-plum-300);
  --action-primary-hover:  var(--kmb-plum-200);
  --action-primary-active: var(--kmb-plum-100);
  --action-primary-text:   #1C1420;

  --action-secondary-bg:     #1E1826;
  --action-secondary-border: #46394F;
  --action-secondary-hover:  #271F30;

  --accent-pale: #2B2233;
  --accent-text: var(--kmb-plum-300);

  --status-error-bg:   #3A2029;
  --status-success-bg: #1E2E27;

  --shadow-tint: 0,0,0;
}

:root {
  /* ---- Tipografía ---- */
  --font-display: "Caveat", cursive;
  --font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Mulish", "Segoe UI", system-ui, sans-serif;

  --fs-2xs: .625rem;  /* 10px */
  --fs-xs:  .6875rem; /* 11px */
  --fs-sm:  .75rem;   /* 12px */
  --fs-md:  .8125rem; /* 13px */
  --fs-base:.875rem;  /* 14px */
  --fs-lg:  1rem;     /* 16px */
  --fs-xl:  1.125rem; /* 18px */
  --fs-2xl: 1.25rem;  /* 20px */
  --fs-3xl: 1.5rem;   /* 24px */
  --fs-4xl: 1.75rem;  /* 28px */
  --fs-5xl: 2rem;     /* 32px */
  --fs-6xl: 2.5rem;   /* 40px */
  --fs-7xl: 3.25rem;  /* 52px, hero */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.08em;

  /* ---- Espaciado: escala de 4px ---- */
  --sp-0: 0;
  --sp-px: 1px;
  --sp-1: .25rem;  /* 4px */
  --sp-2: .5rem;   /* 8px */
  --sp-3: .75rem;  /* 12px */
  --sp-4: 1rem;    /* 16px */
  --sp-5: 1.25rem; /* 20px */
  --sp-6: 1.5rem;  /* 24px */
  --sp-8: 2rem;    /* 32px */
  --sp-10: 2.5rem; /* 40px */
  --sp-12: 3rem;   /* 48px */
  --sp-16: 4rem;   /* 64px */
  --sp-20: 5rem;   /* 80px */
  --sp-24: 6rem;   /* 96px */
  --sp-32: 8rem;   /* 128px */

  /* ---- Radios ---- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ---- Motion ---- */
  --dur-instant: 0ms;
  --dur-fast: 100ms;
  --dur-normal: 200ms;
  --dur-slow: 300ms;
  --dur-slower: 500ms;

  --ease-linear: linear;
  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --ease-inout: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* ---- Z-index ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-modal: 400;
  --z-toast: 500;

  /* ---- Layout ---- */
  --container-max: 1180px;
  --header-height: 68px;
}

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