/* ==========================================================================
   CatalogoCode Design System v2 — 01 · Tokens (escala, radios, sombras, motion)
   Solo variables: no pinta nada por sí solo. Colores → 02-themes.css.
   Forma por categoría → 03-profiles.css.
   ========================================================================== */
@layer tokens {
  #ds2 {
    /* Tipografía */
    --ds-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ds-font-display: var(--ds-font-sans);
    --ds-fs-xs: .75rem;    /* 12 */
    --ds-fs-sm: .8125rem;  /* 13 */
    --ds-fs-md: .9375rem;  /* 15 */
    --ds-fs-lg: 1.125rem;  /* 18 */
    --ds-fs-xl: 1.375rem;  /* 22 */
    --ds-fs-2xl: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);

    /* Espaciado (base 4) */
    --ds-1: 4px;  --ds-2: 8px;  --ds-3: 12px; --ds-4: 16px;
    --ds-5: 20px; --ds-6: 24px; --ds-8: 32px; --ds-10: 40px;

    /* Radios */
    --ds-r-sm: 8px;
    --ds-r-md: 12px;
    --ds-r-lg: 16px;
    --ds-r-xl: 22px;
    --ds-r-pill: 999px;

    /* Elevación (sombras multicapa suaves) */
    --ds-shadow-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
    --ds-shadow-2: 0 2px 4px rgba(0,0,0,.05), 0 8px 24px -6px rgba(0,0,0,.12);
    --ds-shadow-3: 0 4px 8px rgba(0,0,0,.06), 0 18px 48px -12px rgba(0,0,0,.28);

    /* Motion */
    --ds-ease: cubic-bezier(.2, .8, .2, 1);
    --ds-dur: .18s;

    /* Layout */
    --ds-container: 1240px;
    --ds-nav-h: 64px;
    --ds-sticky-top: 0px;

    /* Acento: lo pone la tienda (--accent); el tema da un respaldo. */
    --ds-brand: var(--ds-theme-brand, var(--accent, var(--ds-accent)));
    --ds-brand-ink: var(--ds-theme-brand-ink, var(--accent-ink, #fff));
  }
}