/* ================================================================ ARM EMPRENDEDORES — VARIABLES.CSS Design tokens. Es el único archivo donde se declara un color. MODO OSCURO El tema real vive en el atributo `data-tema` del : data-tema="claro" → paleta clara siempre data-tema="oscuro" → paleta oscura siempre data-tema="auto" → sigue al sistema operativo (valor por defecto) js/utils.js lo escribe antes de pintar para evitar el parpadeo blanco al abrir la app de noche. ================================================================ */ :root { /* ── Marca ARM ────────────────────────────────────────────── */ --brand: #0d9488; --brand-hover: #0f766e; --brand-dark: #0a7060; --brand-light: #ccfbf1; --brand-bg: #e6f7f5; --brand-contrast: #ffffff; /* Acento para acciones de dinero (cobrar, vender). El naranjo destaca sobre el teal sin competir con los estados. */ --accent: #f97316; --accent-hover: #ea580c; --accent-bg: #fff1e6; /* ── Superficies ──────────────────────────────────────────── */ --bg-page: #f1f6f6; --bg-card: #ffffff; --bg-soft: #f8fbfb; --bg-input: #f7fafa; --bg-hover: #eef6f6; --bg-dim: rgba(15, 33, 33, 0.5); --bg-header: #ffffff; /* ── Texto ────────────────────────────────────────────────── */ --tx-1: #0f172a; --tx-2: #334155; --tx-3: #64748b; --tx-4: #94a3b8; --tx-invert: #ffffff; /* ── Bordes ───────────────────────────────────────────────── */ --bd: #e2e8f0; --bd-light: #f1f5f9; --bd-strong:#cbd5e1; --bd-focus: #0d9488; /* ── Estados. Los tres colores del semáforo de inventario ── */ --ok: #059669; --ok-bg: #d1fae5; --ok-tx: #065f46; --warn: #d97706; --warn-bg: #fef3c7; --warn-tx: #92400e; --alert: #dc2626; --alert-bg: #fee2e2; --alert-tx: #991b1b; --info: #2563eb; --info-bg: #dbeafe; --info-tx: #1e40af; --neutral: #64748b; --neutral-bg: #f1f5f9; --neutral-tx: #334155; --purple: #7c3aed; --purple-bg: #ede9fe; --purple-tx: #5b21b6; /* ── Tipografía ───────────────────────────────────────────── */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Escala en rem: respeta el tamaño de fuente que el usuario configuró en su celular. Nunca fijar tamaños en px. */ --f-xs: 0.75rem; /* 12px */ --f-sm: 0.875rem; /* 14px */ --f-base: 1rem; /* 16px — mínimo legible en la feria */ --f-lg: 1.125rem; /* 18px */ --f-xl: 1.3125rem; /* 21px */ --f-2xl: 1.625rem; /* 26px */ --f-3xl: 2rem; /* 32px */ --f-4xl: 2.5rem; /* 40px — cifras del dashboard */ --fw-r: 400; --fw-m: 500; --fw-sb: 600; --fw-b: 700; --fw-x: 800; /* ── Espaciado ────────────────────────────────────────────── */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; /* ── Radios ───────────────────────────────────────────────── */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-full: 9999px; /* ── Sombras ──────────────────────────────────────────────── */ --sh-xs: 0 1px 2px rgba(2, 32, 32, 0.06); --sh-sm: 0 1px 4px rgba(2, 32, 32, 0.07), 0 1px 2px rgba(2, 32, 32, 0.04); --sh: 0 2px 12px rgba(2, 32, 32, 0.08), 0 1px 3px rgba(2, 32, 32, 0.04); --sh-lg: 0 10px 32px rgba(2, 32, 32, 0.12), 0 2px 8px rgba(2, 32, 32, 0.05); --sh-brand: 0 4px 16px rgba(13, 148, 136, 0.32); --sh-accent: 0 4px 16px rgba(249, 115, 22, 0.32); /* ── Transiciones ─────────────────────────────────────────── */ --t: 0.14s ease; --t-md: 0.24s ease; --t-lg: 0.34s cubic-bezier(0.16, 1, 0.3, 1); /* ── Métricas de la interfaz móvil ────────────────────────── */ --touch: 48px; /* área táctil mínima */ --touch-lg: 64px; /* botones de Venta Express */ --header-h: 56px; --nav-h: 60px; /* barra inferior */ --sidebar-w: 256px; /* solo escritorio */ --max-w: 1180px; /* Respeta la barra de gestos del iPhone y el notch. */ --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); color-scheme: light; } /* ================================================================ PALETA OSCURA Se declara una sola vez y se aplica en los dos casos: elección explícita del usuario y preferencia del sistema en modo "auto". ================================================================ */ :root[data-tema="oscuro"], :root[data-tema="auto"] { --dark-bg-page: #0b1414; --dark-bg-card: #142020; --dark-bg-soft: #182727; --dark-bg-input: #1b2b2b; --dark-bg-hover: #1f3232; --dark-bg-header: #142020; } :root[data-tema="oscuro"] { --brand: #2dd4bf; --brand-hover: #5eead4; --brand-dark: #14b8a6; --brand-light: #134e4a; --brand-bg: #16302e; --brand-contrast: #04201d; --accent: #fb923c; --accent-hover:#fdba74; --accent-bg: #3a2313; --bg-page: var(--dark-bg-page); --bg-card: var(--dark-bg-card); --bg-soft: var(--dark-bg-soft); --bg-input: var(--dark-bg-input); --bg-hover: var(--dark-bg-hover); --bg-header: var(--dark-bg-header); --bg-dim: rgba(0, 0, 0, 0.68); --tx-1: #ecfdf9; --tx-2: #c3d4d2; --tx-3: #8ba3a1; --tx-4: #64807e; --tx-invert: #04201d; --bd: #24393a; --bd-light: #1c2c2d; --bd-strong: #33504f; --bd-focus: #2dd4bf; /* En oscuro los fondos de estado son translúcidos: mantienen el contraste del texto sin encender bloques de color saturado. */ --ok: #34d399; --ok-bg: #06382c; --ok-tx: #6ee7b7; --warn: #fbbf24; --warn-bg: #3c2c07; --warn-tx: #fcd34d; --alert: #f87171; --alert-bg: #431414; --alert-tx: #fca5a5; --info: #60a5fa; --info-bg: #10294d; --info-tx: #93c5fd; --neutral: #94a3b8; --neutral-bg: #1e2c2d; --neutral-tx: #cbd5e1; --purple: #a78bfa; --purple-bg: #2a1d4d; --purple-tx: #c4b5fd; --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-sm: 0 1px 4px rgba(0, 0, 0, 0.45); --sh: 0 2px 12px rgba(0, 0, 0, 0.5); --sh-lg: 0 10px 32px rgba(0, 0, 0, 0.6); --sh-brand: 0 4px 16px rgba(45, 212, 191, 0.22); --sh-accent: 0 4px 16px rgba(251, 146, 60, 0.22); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-tema="auto"] { --brand: #2dd4bf; --brand-hover: #5eead4; --brand-dark: #14b8a6; --brand-light: #134e4a; --brand-bg: #16302e; --brand-contrast: #04201d; --accent: #fb923c; --accent-hover:#fdba74; --accent-bg: #3a2313; --bg-page: var(--dark-bg-page); --bg-card: var(--dark-bg-card); --bg-soft: var(--dark-bg-soft); --bg-input: var(--dark-bg-input); --bg-hover: var(--dark-bg-hover); --bg-header: var(--dark-bg-header); --bg-dim: rgba(0, 0, 0, 0.68); --tx-1: #ecfdf9; --tx-2: #c3d4d2; --tx-3: #8ba3a1; --tx-4: #64807e; --tx-invert: #04201d; --bd: #24393a; --bd-light: #1c2c2d; --bd-strong: #33504f; --bd-focus: #2dd4bf; --ok: #34d399; --ok-bg: #06382c; --ok-tx: #6ee7b7; --warn: #fbbf24; --warn-bg: #3c2c07; --warn-tx: #fcd34d; --alert: #f87171; --alert-bg: #431414; --alert-tx: #fca5a5; --info: #60a5fa; --info-bg: #10294d; --info-tx: #93c5fd; --neutral: #94a3b8; --neutral-bg: #1e2c2d; --neutral-tx: #cbd5e1; --purple: #a78bfa; --purple-bg: #2a1d4d; --purple-tx: #c4b5fd; --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --sh-sm: 0 1px 4px rgba(0, 0, 0, 0.45); --sh: 0 2px 12px rgba(0, 0, 0, 0.5); --sh-lg: 0 10px 32px rgba(0, 0, 0, 0.6); --sh-brand: 0 4px 16px rgba(45, 212, 191, 0.22); --sh-accent: 0 4px 16px rgba(251, 146, 60, 0.22); color-scheme: dark; } }