/**
 * ─────────────────────────────────────────────────────────────────
 *  DESIGN SYSTEM — TOKENS CANÓNICOS · WapuCommerce theme v4.0.40
 * ─────────────────────────────────────────────────────────────────
 *
 *  ⚠️  ESTE ES EL ÚNICO ARCHIVO QUE DECLARA TOKENS `--ds-*`.
 *
 *  - Todos los demás CSS (archive.css, checkout.css, header.css,
 *    main.css, etc.) DEBEN SOLO CONSUMIR estos tokens vía `var(--ds-X)`.
 *  - Si necesitas un valor nuevo, AÑÁDELO AQUÍ. No lo definas inline.
 *  - Para retrocompat con namespaces legacy (--ws-*, --font-*,
 *    --wapu-*, etc.) ver `aliases.css` — esos son aliases puros, no
 *    nuevos tokens.
 *
 *  Namespaces:
 *    --ds-*     ← canónico (esto). Light theme por defecto.
 *    --drop-*   ← inyectado por Drop Bridge (Ohana, Velvet, Merlo,
 *                Huazotl). NO se declara aquí.
 *    --pg-*     ← Playground chrome. Vive en wapu-playground/. No tocar.
 *    --cs-*     ← Card Studio. Vive en wapu-playground/. No tocar.
 *    --ws-*     ← alias de --drop-*. Ver aliases.css.
 *    --wapu-*   ← legacy. Ver aliases.css.
 *
 *  Documentación completa: /docs/DS-TOKENS.md
 *  Versión: 4.0.40 — Fase 1 unificación
 *  Fecha:   2026-05-08
 * ─────────────────────────────────────────────────────────────────
 */

:root {
    --ds-ink: #000000;
    --ds-ink-2: rgba(60, 60, 67, .85);
    --ds-ink-3: rgba(60, 60, 67, .6);
    --ds-ink-4: rgba(60, 60, 67, .3);
    --ds-surface: #ffffff;
    --ds-surface-2: #f2f2f7;
    --ds-surface-3: #ffffff;
    --ds-surface-group: #f2f2f7;
    --ds-fill: rgba(120, 120, 128, .2);
    --ds-fill-2: rgba(120, 120, 128, .16);
    --ds-fill-3: rgba(118, 118, 128, .12);
    --ds-fill-4: rgba(116, 116, 128, .08);
    --ds-separator: rgba(60, 60, 67, .29);
    --ds-separator-soft: rgba(60, 60, 67, .18);
    --ds-separator-strong: rgba(0, 0, 0, .55);
    --ds-action: #000000;
    --ds-action-pressed: rgba(60, 60, 67, .85);
    --ds-action-soft: rgba(116, 116, 128, .08);
    --ds-action-ink: #ffffff;
    --ds-danger: #ff3b30;
    --ds-danger-soft: rgba(255, 59, 48, .12);
    --ds-danger-ink: #ffffff;
    --ds-success: #34c759;
    --ds-success-soft: rgba(52, 199, 89, .12);
    --ds-success-ink: #ffffff;
    --ds-warning: #ff9500;
    --ds-warning-soft: rgba(255, 149, 0, .12);
    --ds-warning-ink: #ffffff;
    --ds-info: #5856d6;
    --ds-info-soft: rgba(88, 86, 214, .12);
    --ds-info-ink: #ffffff;
    --ds-font-text: "Poppins", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    --ds-font-display: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
    --ds-fw-regular: 400;
    --ds-fw-medium: 500;
    --ds-fw-semibold: 600;
    --ds-fw-bold: 700;
    --ds-fs-hero-display: clamp(1.625rem, 4.58vw + .552rem, 2.75rem);
    --ds-fs-brand-display: clamp(2.25rem, 1.527vw + 1.892rem, 2.625rem);
    --ds-fs-large-title: clamp(1.75rem, 1.527vw + 1.392rem, 2.125rem);
    --ds-fs-price-display: clamp(1.5rem, 1.527vw + 1.142rem, 1.875rem);
    --ds-fs-title-1: clamp(1.5rem, 1.018vw + 1.261rem, 1.75rem);
    --ds-fs-hero-medium: clamp(1.25rem, 1.527vw + .892rem, 1.625rem);
    --ds-fs-title-2: clamp(1.25rem, .509vw + 1.131rem, 1.375rem);
    --ds-fs-title-3: clamp(1.125rem, .509vw + 1.006rem, 1.25rem);
    --ds-fs-headline: 1.0625rem;
    --ds-fs-body: 1.0625rem;
    --ds-fs-callout: 1rem;
    --ds-fs-subhead: .9375rem;
    --ds-fs-footnote: .8125rem;
    --ds-fs-caption-1: .75rem;
    --ds-fs-caption-2: .6875rem;
    --ds-lh-tight: 1.2;
    --ds-lh-snug: 1.3;
    --ds-lh-base: 1.4;
    --ds-lh-relax: 1.55;
    --ds-ls-tighter: -.02em;
    --ds-ls-tight: -.01em;
    --ds-ls-normal: 0;
    --ds-ls-wide: .02em;
    --ds-s-0: 0;
    --ds-s-1: .5rem;
    --ds-s-2: 1rem;
    --ds-s-3: 1.5rem;
    --ds-s-4: 2rem;
    --ds-s-5: 2.5rem;
    --ds-s-6: 3rem;
    --ds-s-7: 4rem;
    --ds-s-8: 5rem;
    --ds-r-xs: .5rem;
    --ds-r-sm: .625rem;
    --ds-r-md: .875rem;
    --ds-r-lg: 1.25rem;
    --ds-r-xl: 1.75rem;
    --ds-r-pill: 999px;
    --ds-border-hairline: .5px;
    --ds-border-thin: 1px;
    --ds-border-thick: 2px;
    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, .08);
    --ds-shadow-lg: 0 16px 40px rgba(0, 0, 0, .12);
    --ds-shadow-focus: 0 0 0 2px #007aff;
    --ds-shadow-focus-danger: 0 0 0 2px var(--ds-danger);
    --ds-blur-sm: blur(10px);
    --ds-blur-md: blur(20px);
    --ds-blur-lg: blur(40px);
    --ds-ease: cubic-bezier(.25, .46, .45, .94);
    --ds-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ds-ease-in: cubic-bezier(.4, 0, 1, 1);
    --ds-ease-out: cubic-bezier(0, 0, .2, 1);
    --ds-dur-fast: .15s;
    --ds-dur: .25s;
    --ds-dur-slow: .4s;
    --ds-z-base: 1;
    --ds-z-dropdown: 100;
    --ds-z-sticky: 200;
    --ds-z-overlay: 900;
    --ds-z-modal: 1000;
    --ds-z-toast: 1200;
    --ds-bp-sm: 480px;
    --ds-bp-md: 768px;
    --ds-bp-lg: 1024px;
    --ds-bp-xl: 1440px;
    color-scheme:light;}

/* ─────────────────────────────────────────────────────────────────
 *  DARK MODE — override de tokens cuando hay clase .wapu-dark
 *  Misma estructura, valores invertidos siguiendo Apple HIG.
 *  Trigger: añadir clase `wapu-dark` al <html> o <body>.
 *  Por compat con sistema operativo, se podría exponer también vía
 *  `@media (prefers-color-scheme: dark)` — fuera de scope Fase 1.
 * ───────────────────────────────────────────────────────────────── */

.wapu-dark,
.wapu-dark :root {
    --ds-ink: #ffffff;
    --ds-ink-2: rgba(235, 235, 245, .85);
    --ds-ink-3: rgba(235, 235, 245, .6);
    --ds-ink-4: rgba(235, 235, 245, .3);
    --ds-surface: #000000;
    --ds-surface-2: #1c1c1e;
    --ds-surface-3: #2c2c2e;
    --ds-surface-group: #000000;
    --ds-fill: rgba(120, 120, 128, .36);
    --ds-fill-2: rgba(120, 120, 128, .32);
    --ds-fill-3: rgba(118, 118, 128, .24);
    --ds-fill-4: rgba(118, 118, 128, .18);
    --ds-separator: rgba(84, 84, 88, .65);
    --ds-separator-soft: rgba(84, 84, 88, .4);
    --ds-separator-strong: rgba(84, 84, 88, .85);
    --ds-action: #ffffff;
    --ds-action-pressed: rgba(235, 235, 245, .85);
    --ds-action-soft: rgba(120, 120, 128, .2);
    --ds-action-ink: #000000;
    --ds-danger: #ff453a;
    --ds-danger-soft: rgba(255, 69, 58, .18);
    --ds-danger-ink: #ffffff;
    --ds-success: #30d158;
    --ds-success-soft: rgba(48, 209, 88, .18);
    --ds-success-ink: #ffffff;
    --ds-warning: #ff9f0a;
    --ds-warning-soft: rgba(255, 159, 10, .18);
    --ds-warning-ink: #ffffff;
    --ds-info: #5e5ce6;
    --ds-info-soft: rgba(94, 92, 230, .18);
    --ds-info-ink: #ffffff;
    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, .6);
    --ds-shadow-lg: 0 16px 40px rgba(0, 0, 0, .8);
    --ds-shadow-focus: 0 0 0 2px #0a84ff;
    --ds-shadow-focus-danger: 0 0 0 2px var(--ds-danger);
    color-scheme:dark;}