/* ============================================================
   TOKENS — Tu Cajita
   Sistema de diseño: colores, tipografía, espaciado, radios,
   sombras, transiciones.
   ============================================================ */

:root {

  /* --- Colores de marca --- */
  --color-bg:          #FBDCE7;   /* Rosa claro / fondo principal */
  --color-white:       #FFFFFF;
  --color-accent:      #F07DAA;   /* Rosa oscuro / CTAs, acentos */
  --color-text:        #5A4A52;   /* Texto largo / legibilidad */
  --color-text-light:  #9B8591;   /* Texto secundario, subtítulos */

  /* Variaciones funcionales derivadas de la marca */
  --color-accent-hover:   #e0659a; /* accent ligeramente más oscuro */
  --color-accent-subtle:  #fce8f1; /* fondo de chips, badges */
  --color-border:         #f3c6d8; /* bordes suaves */
  --color-topbar-bg:      #F07DAA;
  --color-topbar-text:    #FFFFFF;

  /* --- Tipografía --- */
  --font-script:  'Dancing Script', cursive;        /* acentos hero */
  --font-serif:   'Playfair Display', serif;         /* titulares grandes */
  --font-sans:    'Poppins', sans-serif;             /* UI, nav, cuerpo */

  --font-size-xs:   0.75rem;   /*  12px */
  --font-size-sm:   0.875rem;  /*  14px */
  --font-size-base: 1rem;      /*  16px */
  --font-size-md:   1.125rem;  /*  18px */
  --font-size-lg:   1.25rem;   /*  20px */
  --font-size-xl:   1.5rem;    /*  24px */
  --font-size-2xl:  2rem;      /*  32px */
  --font-size-3xl:  2.75rem;   /*  44px */
  --font-size-4xl:  3.5rem;    /*  56px */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;

  --line-height-tight:  1.2;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  /* --- Espaciado (escala x4) --- */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* --- Radios --- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  /* --- Sombras --- */
  --shadow-xs:  0 1px 3px rgba(90, 74, 82, 0.08);
  --shadow-sm:  0 2px 8px rgba(90, 74, 82, 0.10);
  --shadow-md:  0 4px 16px rgba(90, 74, 82, 0.12);
  --shadow-lg:  0 8px 32px rgba(90, 74, 82, 0.14);
  --shadow-card-hover: 0 12px 40px rgba(240, 125, 170, 0.22);

  /* --- Transiciones --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* --- Layout --- */
  --container-max:     1280px;
  --container-padding: var(--space-6);

  /* --- Z-index --- */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-drawer:     400;
  --z-modal:      500;
}