/* ============================================================================ TOKENS.CSS — Mant & Service · Calama Sistema híbrido: industrial dark + azul cobalto brand + amber secundario Derivado de DESIGN.md v1.0 + adaptación logo cliente (2026-05-07) ============================================================================ */ :root { /* ========================================================================== COLORS — Mant & Service brand (azul eléctrico del logo cliente) Paleta derivada DIRECTAMENTE del logo: engranaje + llave + texto azul ========================================================================== */ --mas-blue-deep: #0A4DA3; /* azul profundo, hovers / pressed states */ --mas-blue: #1373D9; /* azul brand principal — match logo */ --mas-blue-bright: #2E91F2; /* azul electric vibrante, gradients y glow */ --mas-blue-soft: #5BB0FF; /* azul claro luminoso, links sobre dark */ --mas-blue-tint: #E6F2FF; /* azul tint para fondos sutiles light */ --mas-blue-glow: #4FA8FF; /* azul glow para gradients hero */ /* ========================================================================== COLORS — Industrial mecánico (mantiene autoridad de oficio) ========================================================================== */ /* Dominants */ --shop-graphite: #161A1F; /* dark casi negro azulado (más en sintonía con brand) */ --shop-steel: #232830; /* secondary surface dark */ --shop-bone: #ECEEF1; /* off-white frío industrial */ --shop-paper: #F7F8FA; /* surface light para reading */ /* Mid-tones */ --shop-grease: #4A4F58; --shop-rust-mute: #6B4630; --shop-zinc: #8B9099; /* Secondary accent — RESERVADO solo para warnings/urgencias específicas El azul del logo es el protagonista absoluto; amber es funcional, no de marca */ --shop-amber: #F2A516; /* warning state */ --shop-fire: #D63D24; /* urgent / error */ /* ========================================================================== FUNCTIONAL COLORS ========================================================================== */ --color-success: #2E8B57; --color-warning: var(--shop-amber); --color-error: var(--shop-fire); --color-info: var(--mas-blue); --color-whatsapp: #25D366; /* Status badges para portal cliente */ --status-completed: #2E8B57; --status-progress: var(--mas-blue); --status-pending: var(--shop-amber); --status-urgent: var(--shop-fire); --status-scheduled: #6B7280; /* ========================================================================== SURFACES ========================================================================== */ --surface-page: var(--shop-bone); --surface-page-alt: var(--shop-paper); --surface-card: #FFFFFF; --surface-card-hover: #F7F8FA; --surface-overlay: rgba(22, 26, 31, 0.88); --surface-overlay-blue: rgba(11, 95, 191, 0.85); --surface-dark: var(--shop-graphite); --surface-dark-alt: var(--shop-steel); /* ========================================================================== TEXT ========================================================================== */ --text-primary: var(--shop-graphite); --text-secondary: var(--shop-grease); --text-muted: var(--shop-zinc); --text-on-dark: var(--shop-bone); --text-on-dark-mut: rgba(236, 238, 241, 0.65); --text-on-blue: #FFFFFF; --text-link: var(--mas-blue); --text-link-dark: var(--mas-blue-soft); /* ========================================================================== TYPOGRAPHY ========================================================================== */ --font-display: "Druk Wide", "Bahnschrift Condensed", "Oswald", "Arial Black", sans-serif; --font-body: "IBM Plex Sans", "Inter Tight", system-ui, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", "Consolas", monospace; --font-tabular: var(--font-mono); --font-editorial: "Tiempos Headline", "Recoleta", Georgia, serif; /* Type scale */ --type-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --type-sm: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem); --type-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --type-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem); --type-xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); --type-2xl: clamp(2rem, 1.7rem + 1.5vw, 2.5rem); --type-3xl: clamp(2.75rem, 2.2rem + 2.75vw, 4rem); --type-display: clamp(3.5rem, 2.5rem + 5vw, 7rem); --type-mega: clamp(4.5rem, 3rem + 9vw, 11rem); /* Line heights */ --leading-tight: 0.95; --leading-snug: 1.15; --leading-normal: 1.5; --leading-relaxed: 1.7; /* Letter spacing */ --tracking-mega: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-shop: 0.12em; /* ========================================================================== SPACING (base 4px) ========================================================================== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem; --space-48: 12rem; /* ========================================================================== LAYOUT ========================================================================== */ --container-narrow: 64rem; --container-default: 80rem; --container-wide: 96rem; --container-bleed: 100%; --section-padding-y: var(--space-24); --section-padding-y-mobile: var(--space-16); /* ========================================================================== ELEVATION ========================================================================== */ --shadow-shop-sm: 0 2px 4px rgba(22, 26, 31, 0.08); --shadow-shop-md: 0 6px 16px rgba(22, 26, 31, 0.10); --shadow-shop-lg: 0 16px 40px rgba(22, 26, 31, 0.16); --shadow-blue-sm: 0 2px 12px rgba(11, 95, 191, 0.18); --shadow-blue-md: 0 8px 24px rgba(11, 95, 191, 0.22); --shadow-blue-glow: 0 0 0 4px rgba(11, 95, 191, 0.18); --border-shop: 1.5px solid var(--shop-graphite); --border-blue: 2px solid var(--mas-blue); --border-amber: 2px solid var(--shop-amber); --border-zinc: 1px solid var(--shop-zinc); --border-subtle: 1px solid rgba(22, 26, 31, 0.08); --border-on-dark: 1px solid rgba(236, 238, 241, 0.12); /* ========================================================================== RADIUS ========================================================================== */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; /* ========================================================================== TRANSITIONS ========================================================================== */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* ========================================================================== Z-INDEX ========================================================================== */ --z-base: 0; --z-overlay: 10; --z-sticky: 50; --z-modal: 100; --z-chat: 900; --z-toast: 1000; } /* ============================================================================ DARK SECTIONS scope ============================================================================ */ .surface-dark { --surface-page: var(--shop-graphite); --text-primary: var(--text-on-dark); --text-secondary: var(--text-on-dark-mut); --surface-card: var(--shop-steel); } .surface-dark-alt { --surface-page: var(--shop-steel); --text-primary: var(--text-on-dark); --text-secondary: var(--text-on-dark-mut); } /* ============================================================================ PREFERS-REDUCED-MOTION ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0s; --transition-normal: 0s; --transition-slow: 0s; --transition-spring: 0s; } }