/* ============================================================ tokens.css — Design tokens de la plataforma WDE ------------------------------------------------------------ Estructura white-label en dos capas (ver docs/design/white-label-tokens.md): 1. :root — FUNDACIONALES (no cambian entre tenants): spacing, radii, shadows, transitions, breakpoints, semantic colors estructurales. 2. [data-brand="X"] — BRAND-CUSTOMIZABLES (overridables por organization): primary scale, accent scale, surfaces, ink colors, tipografia display, focus ring. El layout aplica data-brand="vi" en cuando el tenant activo es Volcan Imperial. Para futuros skins (otros venues) basta con agregar un bloque [data-brand="otro-venue"] con sus valores. Tipografias (familias, no scales) se cargan via base.css. ============================================================ */ :root { /* ---------- Spacing scale (no cambia entre tenants) ---------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---------- Border radius ---------- */ --r-none: 0; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 9999px; /* ---------- Shadows ---------- */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(27, 27, 30, 0.04); --shadow-md: 0 8px 24px rgba(27, 27, 30, 0.06); --shadow-lg: 0 16px 32px rgba(27, 27, 30, 0.08); --shadow-xl: 0 24px 64px rgba(27, 27, 30, 0.12); --shadow-focus: 0 0 0 3px rgba(46, 84, 151, 0.25); /* ---------- Transitions / motion ---------- */ --transition-fast: 150ms; --transition-base: 250ms; --transition-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* ---------- Breakpoints (uso via @media en CSS no via JS) ---------- */ --bp-mobile: 640px; --bp-tablet: 1024px; --bp-desktop: 1280px; --bp-wide: 1536px; /* ---------- Semantic colors (compartidos entre tenants) ---------- */ --success: #5e6b57; --success-bg: #e5ebde; --success-ink: #3d4839; --warning: #a88242; --warning-bg: #f4e8cf; --warning-ink: #6b4e1e; --danger: #9a4b3f; --danger-bg: #f1ddd7; --danger-ink: #5f2c24; --info: #4a5258; --info-bg: #e3e6e8; --info-ink: #2a3035; /* ---------- Tipografia scale (sizes, no families) ---------- */ --text-eyebrow: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 26px; --text-3xl: 32px; --text-4xl: 40px; --text-display: 56px; --text-display-lg: 72px; --text-display-xl: 80px; --text-hero: 140px; /* displays operativos Sprint 7 */ --text-recepcion: 200px; /* reception display Sprint 7 */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.45; --leading-relaxed: 1.6; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.14em; /* ---------- Z-index scale ---------- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 800; --z-modal: 900; --z-toast: 950; --z-impersonation: 9999; /* banner "viendo como" siempre encima */ } /* ============================================================ Brand: Volcan Imperial (VI) — primer skin white-label Aplica via ------------------------------------------------------------ Referencia: handoff design § 4.3 + PLATAFORMA-WD § 7.3. Color base: navy imperial #0E2747 (referencia volcanimperial.cl). Accent: azul real #2E5497. Brushed gold #A88A4C solo micro-detalles ceremoniales (sellos, ornamentos legales — nunca protagonista). ============================================================ */ [data-brand="vi"] { /* Surfaces */ --bg: #f2eee5; /* warm off-white, base de la app */ --surface: #fbf7ee; /* paper, cards y panels */ --surface-alt: #dee7f2; /* ice blue, hovers + accent zones */ --surface-elevated: #ffffff; /* modales y popovers */ /* Lines / borders */ --line: #d6ccb4; --line-soft: #e6decb; --line-strong: #b8ad96; /* Ink (text) */ --ink: #1b1b1e; /* texto primario */ --ink-soft: #3a3a40; /* texto secundario */ --muted: #5f5b54; /* texto deemphasized — WCAG AA 5.7:1 sobre --surface-alt */ --muted-on-soft: #5f5b54; /* alias para usar explicito sobre --surface-alt / ice blue */ --mist: #9a9690; /* placeholders, NO usar sobre fondos claros para texto critico */ /* Primary brand scale (navy imperial) */ --primary: #0e2747; /* navy imperial, CTAs y header */ --primary-fg: #f2eee5; /* texto sobre primary */ --primary-hover: #1a3766; --primary-pressed: #082039; /* Accent (azul real) */ --accent: #2e5497; /* azul real, links y secondary CTAs */ --accent-deep: #1a3766; --accent-soft: #dee7f2; /* ice blue muy claro */ --accent-ink: #0e2747; --accent-fg: #ffffff; /* Ornamentos (brushed gold) — uso restringido a sellos */ --brushed-gold: #a88a4c; --brushed-gold-soft: #d9c896; /* Focus ring */ --focus-ring: #2e5497; /* Serif acento (Instrument Serif italic) */ --serif-accent: #1a3766; /* Tipografia families (overridable por tenant) */ --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif; --font-mono: "DM Mono", "SF Mono", Monaco, Consolas, monospace; --font-display-stamp: "Special Gothic Expanded One", "DM Sans", sans-serif; /* Voice / radius overrides per brand (VI usa radius base, sin override) */ } /* ============================================================ Reglas de aplicacion ------------------------------------------------------------ - Las paletas EOS y CSM del handoff (warm off-white / cream) NO se cargan en este deploy. Solo VI. Si llega un segundo tenant, agregar bloque [data-brand="X"] con sus valores y un layout que ponga data-brand="X". - Densidad por audiencia (Event-OS desktop denso vs Casarme mobile-first): no es un cambio de tokens sino de layouts. Los layouts staff-shell y couple-shell usan el mismo set de tokens VI pero distintos --space-* en su scope (mas apretado en staff, mas aireado en couple). ============================================================ */ /* Default fallback si nadie aplica data-brand (debe ser raro en prod) */ body:not([data-brand]) { --bg: #f7f5ef; --surface: #ffffff; --ink: #1b1b1e; --primary: #1f2a37; --primary-fg: #fbf8f1; --accent: #5e6b57; --focus-ring: #5e6b57; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-serif: Georgia, "Times New Roman", serif; --font-mono: "SF Mono", Monaco, Consolas, monospace; }