/* ========================================================================== CUENTAS CLARAS — DESIGN TOKENS -------------------------------------------------------------------------- Amplía los 12 tokens existentes en :root con un sistema fluido completo. Todo lo que escala usa clamp(min, fluid, max) anclado a viewport width. Floor de fluidez: 1024px. Techo: 1600px. (Coherente con la app desktop.) ========================================================================== */ :root { /* ==================================================== 1 · COLORES — Paleta extendida ==================================================== */ /* Verde primario (identidad de marca · DEEP FOREST) */ --color-primary-50: #E9F4EE; --color-primary-100: #C8E3D2; --color-primary-200: #95C8AB; --color-primary-300: #5FA983; --color-primary-400: #3E8C66; --color-primary-500: #2D6A4F; /* ← marca · canonical */ --color-primary-600: #245540; --color-primary-700: #1B4332; --color-primary-800: #133126; --color-primary-900: #0B1F18; /* Aliases canónicos (compatibilidad con CSS existente) */ --color-primary: var(--color-primary-500); --color-primary-hover: var(--color-primary-700); --color-primary-teal: #2A9D8F; /* acento existente — botón cobrar mesa */ /* Neutrales (warm gray para no enfriar el verde) */ --color-ink-900: #111418; /* texto principal heavy */ --color-ink-800: #1F2329; --color-ink-700: #2A3038; /* texto principal */ --color-ink-600: #4A5260; --color-ink-500: #6B7480; /* texto secundario */ --color-ink-400: #97A0AC; /* texto deshabilitado */ --color-ink-300: #C8CDD4; --color-ink-200: #E2E5EA; /* borde fuerte */ --color-ink-150: #ECEEF2; /* divisor */ --color-ink-100: #F3F5F7; /* superficie sutil */ --color-ink-50: #F8F9FA; /* fondo app */ --color-white: #FFFFFF; /* Aliases canónicos (compatibilidad) */ --color-text: var(--color-ink-900); --color-text-dark: var(--color-ink-800); --color-text-mid: var(--color-ink-500); --color-bg: var(--color-ink-50); --color-bg-warm: #F0EDE6; --color-border: var(--color-ink-200); /* Semánticos — escala mínima (bg suave / borde / texto fuerte) */ --color-success-bg: #E6F4EC; --color-success-border: #95C8AB; --color-success: #1F7A4D; --color-warning-bg: #FFF4E0; --color-warning-border: #F4C57A; --color-warning: #B26A00; /* contrast-pass sobre warning-bg */ --color-warning-solid: #F4A261; /* acento naranja existente */ --color-danger-bg: #FDECEE; --color-danger-border: #F2A0A8; --color-danger: #C71F2C; /* AA sobre blanco/danger-bg */ --color-danger-solid: #E63946; /* canónico existente */ --color-info-bg: #E5F0FF; --color-info-border: #9CC2F2; --color-info: #1559B0; /* Aliases canónicos (compatibilidad) */ --color-danger: var(--color-danger-solid); /* mantiene el valor original */ --color-warning: var(--color-warning-solid); /* mantiene el valor original */ /* Focus ring */ --color-focus-ring: rgba(45, 106, 79, 0.32); /* ==================================================== 2 · TIPOGRAFÍA — Inter, fluida via clamp() ==================================================== */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace; /* Type scale — fluida entre 1024px y 1600px de viewport */ --text-xs: clamp(0.75rem, 0.71rem + 0.07vw, 0.8125rem); /* 12 → 13 */ --text-sm: clamp(0.8125rem, 0.78rem + 0.10vw, 0.9375rem); /* 13 → 15 */ --text-base: clamp(0.9375rem, 0.91rem + 0.10vw, 1.0625rem); /* 15 → 17 */ --text-md: clamp(1.0625rem, 1.03rem + 0.13vw, 1.1875rem); /* 17 → 19 */ --text-lg: clamp(1.1875rem, 1.13rem + 0.20vw, 1.375rem); /* 19 → 22 */ --text-xl: clamp(1.375rem, 1.30rem + 0.27vw, 1.625rem); /* 22 → 26 */ --text-2xl: clamp(1.625rem, 1.50rem + 0.40vw, 2rem); /* 26 → 32 */ --text-3xl: clamp(2rem, 1.81rem + 0.60vw, 2.5rem); /* 32 → 40 */ /* Numeric KPI tier — separado del scale general */ --text-kpi: clamp(1.75rem, 1.50rem + 0.80vw, 2.25rem); /* Pesos */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights semánticos */ --leading-tight: 1.2; /* headings */ --leading-snug: 1.35; /* sub-heads, KPI labels */ --leading-normal: 1.55; /* cuerpo */ --leading-relaxed: 1.7; /* lectura larga */ /* Tracking */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* eyebrows / uppercase labels */ /* ==================================================== 3 · SPACING — escala fluida 4-based ==================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: clamp(1.125rem, 1.08rem + 0.15vw, 1.25rem); /* 18→20 */ --space-6: clamp(1.25rem, 1.18rem + 0.20vw, 1.5rem); /* 20→24 */ --space-7: clamp(1.5rem, 1.40rem + 0.27vw, 1.75rem); /* 24→28 */ --space-8: clamp(1.75rem, 1.63rem + 0.40vw, 2.25rem); /* 28→36 */ --space-9: clamp(2rem, 1.81rem + 0.60vw, 2.5rem); /* 32→40 */ --space-10: clamp(2.5rem, 2.25rem + 0.80vw, 3rem); /* 40→48 */ --space-12: clamp(3rem, 2.65rem + 1.10vw, 3.75rem); /* 48→60 */ --space-16: clamp(4rem, 3.50rem + 1.60vw, 5rem); /* 64→80 */ /* ==================================================== 3.b · SPACING VERTICAL — escala fluida vh-based Para alturas críticas en pantallas de menor altura (1080p). Floor: viewport height 1024px. Techo: viewport height 1600px. Coherente con el sistema vw. La unidad `vh` en clamp() es 1% del viewport height (no un factor multiplicativo); ej. a viewport height 1024px, 0.69vh = 7.07px. Convive con --space-* (vw-based); usar SOLO cuando el constraint es vertical y el contenido apilado necesita comprimir. Ver DECISIONS_LOG 2026-05-26. ==================================================== */ --space-v-2: clamp(0.25rem, -3.11px + 0.69vh, 0.5rem); /* 4→8 entre alturas 1024-1600px de viewport */ --space-v-3: clamp(0.5rem, 0.89px + 0.69vh, 0.75rem); /* 8→12 entre alturas 1024-1600px de viewport */ --space-v-4: clamp(0.625rem, -0.65px + 1.04vh, 1rem); /* 10→16 entre alturas 1024-1600px de viewport */ --space-v-5: clamp(0.75rem, -2.22px + 1.39vh, 1.25rem); /* 12→20 entre alturas 1024-1600px de viewport */ /* ==================================================== 4 · LAYOUT — anchos, gutters, container thresholds ==================================================== */ --measure: 66ch; /* ancho ideal de prosa */ --gutter: var(--space-6); --gutter-tight: var(--space-4); --container-min: 20rem; /* mínimo para que un layout fluido empiece a apilar */ /* ==================================================== 5 · RADIUS ==================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; /* default — botones, inputs, chips */ --radius-lg: 12px; /* cards, modales */ --radius-xl: 16px; --radius-full: 999px; /* pills, dots */ /* ==================================================== 6 · ELEVATION (shadows) Tinted hacia el verde primario para coherencia. ==================================================== */ --shadow-card: rgba(0, 0, 0, 0.06); /* canonical existente */ --shadow-xs: 0 1px 2px rgba(17, 20, 24, 0.05); --shadow-sm: 0 1px 3px rgba(17, 20, 24, 0.06), 0 1px 2px rgba(17, 20, 24, 0.04); --shadow-md: 0 2px 8px rgba(17, 20, 24, 0.06), 0 1px 3px rgba(17, 20, 24, 0.04); --shadow-lg: 0 8px 24px rgba(17, 20, 24, 0.10), 0 2px 6px rgba(17, 20, 24, 0.05); --shadow-xl: 0 16px 48px rgba(17, 20, 24, 0.14), 0 4px 12px rgba(17, 20, 24, 0.06); /* Hover lift (botones, cards) */ --shadow-primary-glow: 0 4px 12px rgba(45, 106, 79, 0.30); --shadow-danger-glow: 0 4px 12px rgba(230, 57, 70, 0.28); /* ==================================================== 7 · MOTION — duraciones, easings, transiciones ==================================================== */ --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; --duration-slower: 420ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-base: all var(--duration-base) var(--ease-out); --transition-color: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); /* ==================================================== 8 · Z-INDEX ==================================================== */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-dropdown: 500; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; --z-tooltip: 1200; /* ==================================================== 9 · TARGETS de accesibilidad ==================================================== */ --tap-target-min: 40px; --tap-target: 44px; } /* ========================================================================== REDUCED MOTION — colapsamos transiciones, no animaciones de estado ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; --duration-slower: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }