/* ============================================================ Event-OS · App de la pareja — tokens.css Custom properties puras, sin build step. Scope por tenant: (valor desde BD). Modo nocturno día M: data-night="1" en o contenedor. CAPA A = marca del tenant (se puebla por tenant). CAPA B = derivados + semántica fija (NUNCA se toca por tenant). ORIGEN: design_handoff_app_pareja/tokens.css (8 ago 2026), entregable directo de la sesión de diseño «Itinerario». Se sirve tal cual; el único agregado local es --stage-tint (README §S2). Este archivo carga DESPUÉS de shared/tokens.css y sólo en la app de la pareja: dentro de este scope --focus-ring pasa a ser una SOMBRA (box-shadow), no un color — ver couple/shell.css §0. ============================================================ */ /* ---------- CAPA A · Volcán Imperial (tenant fundador) ---------- */ [data-brand="vi"] { --brand-ink: #0E2747; --brand-accent: #B08D3F; --brand-accent-bright: #D4A876; /* acento sobre fondos oscuros */ --accent-ink: #7A5E22; /* acento legible como texto, AA sobre crema */ --surface-page: #F7F3EC; /* crema */ --surface-card: #FFFFFF; --surface-night: #0B1D33; --photo-frame: #F7F3EC; /* fondo estándar de fotografía 1:1 contraluz */ --font-display: 'Instrument Serif', Georgia, serif; --font-ui: 'DM Sans', system-ui, sans-serif; --font-figures: 'DM Mono', ui-monospace, monospace; --font-stamp: 'Special Gothic Expanded One', 'DM Sans', sans-serif; /* solo wordmark */ --radius-card: 16px; --radius-control: 12px; } /* ---------- CAPA A · Event-OS estándar (default digno) ---------- */ [data-brand="eventos"] { --brand-ink: #26282D; --brand-accent: #8C7351; --brand-accent-bright: #B39A76; --accent-ink: #6B5637; --surface-page: #F6F5F2; --surface-card: #FFFFFF; --surface-night: #17181B; --photo-frame: #F6F5F2; --font-display: Georgia, 'Times New Roman', serif; --font-ui: system-ui, -apple-system, sans-serif; --font-figures: ui-monospace, 'SF Mono', Menlo, monospace; --font-stamp: system-ui, sans-serif; --radius-card: 14px; --radius-control: 10px; } /* ---------- CAPA A · Casa Lirquén (tenant ficticio de QA del theming) ---------- */ [data-brand="lirquen"] { --brand-ink: #16333A; --brand-accent: #3E7A70; --brand-accent-bright: #8FBFB4; --accent-ink: #2D5B53; --surface-page: #F1F4F1; --surface-card: #FFFFFF; --surface-night: #0E2226; --photo-frame: #F1F4F1; --font-display: 'Cormorant Garamond', Georgia, serif; --font-ui: system-ui, -apple-system, sans-serif; --font-figures: ui-monospace, Menlo, monospace; --font-stamp: system-ui, sans-serif; --radius-card: 22px; --radius-control: 16px; } /* ============================================================ CAPA B — derivados. Fórmulas fijas: referencian SOLO capa A. Un tenant con mal gusto no puede producir una app ilegible. ============================================================ */ [data-brand] { /* jerarquía de texto */ --text-strong: var(--brand-ink); --text-base: color-mix(in oklab, var(--brand-ink) 88%, #fff); --text-muted: color-mix(in oklab, var(--brand-ink) 52%, var(--surface-page)); /* filete universal 1px — PROHIBIDO border-left como acento */ --border-hairline: color-mix(in oklab, var(--brand-ink) 15%, transparent); /* botón primario */ --action-primary: var(--brand-ink); --action-primary-press: color-mix(in oklab, var(--brand-ink) 86%, #000); --action-on-primary: #fff; /* acento */ --accent-line: var(--brand-accent); --accent-soft: color-mix(in oklab, var(--brand-accent) 13%, var(--surface-card)); /* lavado de etapa — cabecera de la home en semana M (README §S2) */ --stage-tint: color-mix(in oklab, var(--brand-accent) 20%, var(--surface-page)); /* foco visible (táctil + teclado) */ --focus-ring: 0 0 0 3px color-mix(in oklab, var(--brand-accent) 40%, transparent); /* semántica fija — idéntica en todos los tenants */ --state-positive: #2F6C4F; --positive-soft: color-mix(in oklab, #2F6C4F 10%, var(--surface-card)); --state-warning: #9A5B1F; --warning-soft: color-mix(in oklab, #9A5B1F 10%, var(--surface-card)); --state-danger: #A23B2E; --danger-soft: color-mix(in oklab, #A23B2E 9%, var(--surface-card)); /* estados de mesa (plano SVG) */ --table-free-fill: var(--surface-card); --table-free-line: color-mix(in oklab, var(--brand-ink) 32%, transparent); --table-partial-fill: color-mix(in oklab, var(--brand-accent) 24%, var(--surface-card)); --table-partial-line: var(--accent-ink); --table-full-fill: var(--brand-ink); --table-full-line: var(--brand-ink); --table-frozen-fill: color-mix(in oklab, var(--brand-ink) 7%, var(--surface-page)); --table-frozen-line: color-mix(in oklab, var(--brand-ink) 28%, transparent); /* sombras */ --shadow-card: 0 1px 2px rgba(15,20,35,.04), 0 8px 24px rgba(15,20,35,.06); --shadow-sheet: 0 -12px 40px rgba(10,18,35,.25); /* motion */ --motion-micro: 120ms; /* chips, toggles, press */ --motion-standard: 200ms; /* fundidos, listas, toasts */ --motion-sheet: 320ms; /* hojas inferiores */ --motion-once: 600ms; /* celebración única */ --ease-standard: cubic-bezier(.2, .6, 0, 1); --ease-spring: cubic-bezier(.34, 1.3, .5, 1); } /* ---------- Modo nocturno automático del día M ---------- */ [data-night="1"] { --surface-page: var(--surface-night); --surface-card: color-mix(in oklab, var(--surface-night) 82%, #fff); --text-strong: #F4F2EC; --text-base: #E9E6DE; --text-muted: rgba(244, 242, 236, .6); --border-hairline: rgba(255, 255, 255, .15); --action-primary: var(--brand-accent); /* botón pasa a dorado… */ --action-primary-press: var(--accent-ink); --action-on-primary: var(--brand-ink); /* …con texto navy */ --accent-ink: var(--brand-accent-bright); --accent-soft: color-mix(in oklab, var(--brand-accent) 22%, var(--surface-night)); --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35); } /* ---------- Accesibilidad: se implementa UNA vez, aquí ---------- */ @media (prefers-reduced-motion: reduce) { [data-brand] { --motion-micro: 80ms; --motion-standard: 80ms; --motion-sheet: 80ms; --motion-once: 80ms; --ease-standard: linear; --ease-spring: linear; } [data-brand] *, [data-brand] *::before, [data-brand] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ============================================================ GUARDARRAÍLES para el onboarding de tenants nuevos (validar server-side al guardar la marca del tenant): 1. brand-ink: luminancia relativa ≤ 0.30 → garantiza blanco AA sobre el botón primario. 2. surface-page: luminancia ≥ 0.85 y croma OKLCH ≤ 0.04 → la página es papel, nunca color. 3. brand-accent: croma OKLCH tope 0.14; si el contraste accent/surface-page < 4.5:1, derivar accent-ink oscureciendo L en OKLCH hasta cumplir AA (ese valor se persiste). 4. Texto AA 4.5:1; no-texto 3:1; targets táctiles ≥ 44px. Lo que se le pide al tenant: 3 colores (ink, accent, page), 1–2 tipografías self-hosted, logo horizontal 24px + cuadrado. Todo lo demás sale de la capa B. ============================================================ */