/* ============================================================================ DeCA — Pretium Gestión · Design Tokens (canonical values) These values are the single source of truth. SPEC/design-tokens.md mirrors them. All strings in the UI are translatable (es base; ca/eu/gl/en). No emojis. Paleta: la del issue #20, que manda «mantener la identidad azul actual» — navy de estructura + azul interactivo + cian de acento, con turquesa/ámbar/rojo como colores semánticos. Los hex del issue son "aproximados": aquí se ajustan a tonos que cumplen contraste AA cuando llevan texto encima (badges, botones), reservando los tonos vivos para rellenos, bordes, iconos y degradados. Geometría, tipografía y elevación vienen del design system de Design, `docs/design-handoff/Rediseño app con design system/_ds/…/tokens/`. Su capa de color (navy + verde de acción) NO se adopta: contradice el issue #20. El design system separa color del resto de tokens, así que el intercambio es limpio. ============================================================================ */ :root { /* ---- Color · neutrals (gris azulado, muy claro) ---- */ --color-bg: #f5f8fc; /* app background (issue #20) */ --color-surface: #ffffff; /* cards, panels, table */ --color-surface-2: #eef3f9; /* subtle fills, headers, hover rows */ --color-surface-3: #e2ebf5; /* pressed / active fills */ --color-border: #dce4f0; /* default 1px borders */ --color-border-strong: #c3d1e2; /* inputs, dividers needing weight */ /* ---- Color · text (AA on surfaces) ---- */ --color-text: #0f2743; /* primary text (navy ink, 14.9:1 on #fff) */ --color-text-muted: #52657d; /* secondary (6.0:1 on #fff) */ --color-text-subtle: #7a8ca3; /* tertiary/hints(3.5:1 large only) */ --color-text-invert: #ffffff; /* ---- Color · brand · navy + azul (issue #20: sidebar, enlaces, activos) ---- */ --color-primary-700: #062a5e; /* NAVY — sidebar, títulos, corporativo */ --color-primary-600: #0d5fd1; /* interactivo: enlaces, botones (AA 5:1) */ --color-primary-500: #0967f2; /* AZUL vivo — activo, iconos, acentos */ --color-primary-100: #dbe9fe; /* tinted surface */ --color-primary-050: #eff5ff; /* ---- Color · cian de acento (decorativo, degradados; sin texto encima) ---- */ --color-cyan-500: #16c6e8; --color-cyan-300: #48d3ef; --color-cyan-100: #d6f4fb; /* ---- Color · acento turquesa/verde (familia éxito: emitido, validaciones) ---- */ --color-accent-700: #0b7d69; /* texto sobre blanco (AA) */ --color-accent-600: #0aaf8f; /* turquesa vivo — rellenos, bordes, dots */ --color-accent-100: #d8f5ee; --color-on-accent: #ffffff; /* ---- Degradados de marca ---- */ /* El CTA lleva texto blanco encima, así que el extremo cian se oscurece hasta #0d7aad (4.8:1 con blanco). El #16c6e8 del issue #20 solo daría 2.8:1: los hex del issue son "aproximados" y el cian vivo queda para rellenos sin texto. */ --grad-primary: linear-gradient(120deg, #0d5fd1 0%, #0d7aad 100%); --grad-brand: linear-gradient(165deg, #062a5e 0%, #0b3f7a 100%); /* ---- Color · semantic feedback ---- */ --color-success: #0c8168; --color-success-bg: #dcf5ee; --color-warning: #b5790a; --color-warning-bg: #fdf1d9; --color-danger: #c93a2d; --color-danger-bg: #fdeae6; --color-info: #0d5fd1; --color-info-bg: #e4eefe; --color-focus-ring: #0967f2; /* 3px ring, AA against surfaces */ /* ---- Color · document states (solid badge bg, white text, all AA) ---- */ --state-borrador: #5b6b82; --state-borrador-bg: #eef2f7; --state-borrador-fg: #45566d; --state-emitido: #0c8168; --state-emitido-bg: #dcf5ee; --state-emitido-fg: #0a6c58; --state-modificado: #b5790a; --state-modificado-bg: #fdf1d9; --state-modificado-fg: #8a5c07; --state-anulado: #c93a2d; --state-anulado-bg: #fdeae6; --state-anulado-fg: #9c281d; --state-sustituido: #6b4f9e; --state-sustituido-bg: #efeaf7; --state-sustituido-fg: #533c7c; --state-expirado: #6a7789; --state-expirado-bg: #eef1f5; --state-expirado-fg: #55606f; /* ---- Typography ---- */ --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", "Consolas", monospace; --fs-display: 28px; --lh-display: 34px; --fw-display: 600; --fs-h1: 22px; --lh-h1: 28px; --fw-h1: 600; --fs-h2: 18px; --lh-h2: 24px; --fw-h2: 600; --fs-h3: 16px; --lh-h3: 22px; --fw-h3: 600; --fs-body: 14px; --lh-body: 20px; --fw-body: 400; --fs-body-lg: 16px; --lh-body-lg: 24px; --fs-label: 13px; --lh-label: 18px; --fw-label: 500; --fs-caption: 12px; --lh-caption: 16px; --fs-mono: 13px; --lh-mono: 18px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* ---- Spacing (4px base) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; /* ---- Radius (contenidos, según las capturas) ---- */ --r-sm: 4px; /* chips, controles pequeños */ --r-md: 6px; /* inputs, botones, botones de icono */ --r-lg: 8px; /* tarjeta de acceso, formularios laterales, modales */ --r-xl: 12px; /* tarjetas de contenido, banners */ --r-pill: 999px; /* badges, avatares, barra de cuota */ /* ---- Borders ---- */ --bw-1: 1px; --bw-2: 2px; /* ---- Shadows (navy-blue, low opacity) ---- */ --sh-sm: 0 1px 2px rgba(6, 42, 94, .06), 0 1px 1px rgba(6, 42, 94, .04); --sh-md: 0 2px 6px rgba(6, 42, 94, .08), 0 1px 2px rgba(6, 42, 94, .06); --sh-lg: 0 8px 24px rgba(6, 42, 94, .12), 0 2px 6px rgba(6, 42, 94, .08); --sh-focus: 0 0 0 3px rgba(9, 103, 242, .35); /* ---- Motion ---- */ --ease: cubic-bezier(.2,0,0,1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; /* ---- z-index ---- */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100; --z-backdrop: 1200; --z-modal: 1300; --z-toast: 1400; /* ---- Layout ---- */ --sidebar-w: 248px; --sidebar-w-collapse: 68px; --topbar-h: 56px; --content-max: 1280px; --bp-mobile: 480px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1280px; }