/* ════════════════════════════════════════════════════════════════ DALUNA — DESIGN TOKENS (fuente única de verdad) ──────────────────────────────────────────────────────────────── Cargar SIEMPRE el PRIMERO en todas las páginas. Todo color, espacio, radio, sombra o fuente sale de aquí. Tema claro → tienda (index), perfil, admin Tema oscuro → TPV (html[data-theme="dark"]) ════════════════════════════════════════════════════════════════ */ :root { /* ── MARCA ─────────────────────────────────────────────────── */ --dl-malva-900: #3d2d31; --dl-malva-700: #6b4e54; --dl-malva-500: #917479; /* malva DaLuna (Canva) */ --dl-malva-400: #c0adb0; --dl-malva-200: #dcc8cb; --dl-malva-100: #eddadd; --dl-gold: #c9a77c; /* dorado del logo */ --dl-gold-deep: #a88660; --dl-sage: #8b9a85; --dl-danger: #b5453c; --dl-success: #6f9a6f; /* ── TEMA CLARO (defecto) ──────────────────────────────────── */ --dl-bg: #faf6f1; /* crema */ --dl-bg-2: #f3ece4; --dl-surface: #fffdfa; /* papel */ --dl-ink: #1a1416; --dl-ink-soft: #3d2f32; --dl-ink-mute: #6b5a5d; --dl-line: rgba(26, 20, 22, .08); --dl-line-2: rgba(26, 20, 22, .14); --dl-line-3: rgba(26, 20, 22, .22); --dl-accent: var(--dl-malva-500); --dl-accent-2: var(--dl-gold); /* ── TIPOGRAFÍA ────────────────────────────────────────────── */ --dl-serif: 'Fraunces', 'Playfair Display', Georgia, serif; --dl-sans: 'Inter', 'Lato', -apple-system, BlinkMacSystemFont, sans-serif; --dl-mono: 'JetBrains Mono', ui-monospace, monospace; /* Escala tipográfica fluida (minor third ~1.2) */ --dl-fs-xs: clamp(.69rem, .65rem + .2vw, .78rem); --dl-fs-sm: clamp(.82rem, .78rem + .2vw, .9rem); --dl-fs-base: clamp(.95rem, .9rem + .25vw, 1.05rem); --dl-fs-md: clamp(1.12rem, 1.05rem + .35vw, 1.25rem); --dl-fs-lg: clamp(1.35rem, 1.2rem + .7vw, 1.6rem); --dl-fs-xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.2rem); --dl-fs-2xl: clamp(2.1rem, 1.7rem + 2.2vw, 3rem); /* ── ESPACIADO — escala única base 4px ─────────────────────── */ /* REGLA: usar SOLO estos valores para padding/margin/gap. */ --dl-sp-1: .25rem; /* 4px */ --dl-sp-2: .5rem; /* 8px */ --dl-sp-3: .75rem; /* 12px */ --dl-sp-4: 1rem; /* 16px */ --dl-sp-5: 1.5rem; /* 24px */ --dl-sp-6: 2rem; /* 32px */ --dl-sp-7: 3rem; /* 48px */ --dl-sp-8: 4rem; /* 64px */ --dl-sp-9: 6rem; /* 96px */ /* Ritmo de sección (vertical) — fluido */ --dl-section: clamp(3rem, 2rem + 5vw, 6rem); --dl-section-sm: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); /* ── RADIOS ────────────────────────────────────────────────── */ --dl-r-sm: 8px; --dl-r: 14px; --dl-r-lg: 20px; --dl-r-xl: 28px; --dl-r-pill: 999px; /* ── SOMBRAS ───────────────────────────────────────────────── */ --dl-shadow-soft: 0 1px 2px rgba(26,20,22,.04), 0 8px 24px -12px rgba(26,20,22,.08); --dl-shadow-card: 0 2px 4px rgba(26,20,22,.03), 0 20px 40px -20px rgba(26,20,22,.16); --dl-shadow-lift: 0 4px 10px rgba(26,20,22,.05), 0 30px 60px -30px rgba(26,20,22,.22); /* ── MOVIMIENTO ────────────────────────────────────────────── */ --dl-ease: cubic-bezier(0.19, 1, 0.22, 1); --dl-ease-soft: cubic-bezier(0.25, 1, 0.5, 1); --dl-t-fast: .18s; --dl-t: .3s; --dl-t-slow: .5s; /* ── TÁCTIL / ACCESIBILIDAD ────────────────────────────────── */ --dl-touch: 44px; /* mínimo target táctil (Apple HIG) */ --dl-focus: 0 0 0 3px color-mix(in srgb, var(--dl-accent) 40%, transparent); } /* ════════════════════════════════════════════════════════════════ TEMA OSCURO — TPV Activar con en tpv.html Misma marca (malva + dorado), fondos oscuros cálidos. ════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --dl-bg: #221a1c; /* malva-ink oscuro, coherente con marca */ --dl-bg-2: #2c2225; --dl-surface: #33282b; --dl-surface-2: #3e3134; --dl-surface-3: #4b3c40; --dl-ink: #f7f0ec; --dl-ink-soft: rgba(247,240,236,.88); --dl-ink-mute: rgba(247,240,236,.55); --dl-line: rgba(247,240,236,.12); --dl-line-2: rgba(247,240,236,.22); --dl-line-3: rgba(247,240,236,.36); --dl-accent: var(--dl-malva-400); --dl-accent-2: var(--dl-gold); --dl-shadow-soft: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px -12px rgba(0,0,0,.4); --dl-shadow-card: 0 2px 4px rgba(0,0,0,.2), 0 16px 32px -16px rgba(0,0,0,.5); --dl-shadow-lift: 0 4px 8px rgba(0,0,0,.25), 0 24px 48px -20px rgba(0,0,0,.6); /* Estados de mesa (TPV) */ --dl-libre: #7ab87a; --dl-abierta: var(--dl-gold); --dl-cobrar: #c05050; color-scheme: dark; } /* ════════════════════════════════════════════════════════════════ PUENTE DE COMPATIBILIDAD Mapea los nombres antiguos de los 3 CSS existentes a los tokens. Así los archivos viejos consumen los valores nuevos sin tocarlos línea a línea. Eliminar este bloque cuando la migración acabe. ════════════════════════════════════════════════════════════════ */ :root { /* estilos.css (legacy) */ --color-blanco: var(--dl-surface); --color-arena: var(--dl-bg-2); --color-beige: var(--dl-bg); /* antes #D0C3BF, ahora crema de marca */ --color-malva: var(--dl-malva-500); --texto-titulo: var(--dl-ink-soft); --texto-cuerpo: var(--dl-ink-mute); --font-serif: var(--dl-serif); --font-sans: var(--dl-sans); --radius-xl: var(--dl-r-xl); /* daluna-refresh.css */ --ink: var(--dl-ink); --ink-soft: var(--dl-ink-soft); --ink-mute: var(--dl-ink-mute); --bone: #f5efe9; --cream: var(--dl-bg); --cream-2: var(--dl-bg-2); --paper: var(--dl-surface); --malva-900: var(--dl-malva-900); --malva-700: var(--dl-malva-700); --malva-500: var(--dl-malva-500); --malva-400: var(--dl-malva-400); --malva-200: var(--dl-malva-200); --malva-100: var(--dl-malva-100); --gold: var(--dl-gold); --gold-deep: var(--dl-gold-deep); --sage: var(--dl-sage); --danger: var(--dl-danger); --line: var(--dl-line); --line-2: var(--dl-line-2); --line-3: var(--dl-line-3); --font-mono: var(--dl-mono); --radius-sm: var(--dl-r-sm); --radius: var(--dl-r); --radius-lg: var(--dl-r-lg); --shadow-soft: var(--dl-shadow-soft); --shadow-card: var(--dl-shadow-card); --shadow-lift: var(--dl-shadow-lift); --ease: var(--dl-ease); --ease-soft: var(--dl-ease-soft); } /* tpv.css (legacy) — solo aplica en tema oscuro */ html[data-theme="dark"] { --bg: var(--dl-bg); --surface: var(--dl-surface); --surface-2: var(--dl-surface-2); --surface-3: var(--dl-surface-3); --border: var(--dl-line); --border-2: var(--dl-line-2); --border-3: var(--dl-line-3); --text: var(--dl-ink); --text-soft: var(--dl-ink-soft); --text-mute: var(--dl-ink-mute); --malva: var(--dl-malva-500); --malva-l: var(--dl-malva-400); --gold-d: var(--dl-gold-deep); --libre: var(--dl-libre); --abierta: var(--dl-abierta); --cobrar: var(--dl-cobrar); --r-sm: var(--dl-r-sm); --r: var(--dl-r); --r-lg: var(--dl-r-lg); --r-xl: var(--dl-r-xl); --f-serif: var(--dl-serif); --f-sans: var(--dl-sans); } /* ── Accesibilidad global ── */ :focus-visible { outline: none; box-shadow: var(--dl-focus); border-radius: var(--dl-r-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }