/* Zebra Design Tokens — fuente unica (sitio + Virtual Stripes). Cambiar aqui propaga a todo. */ :root { /* Borde refinado (hairline) — whisper */ --border: rgba(10, 10, 10, .10); /* Borde con mas presencia para chips/tags pequenos (las superficies grandes usan --border) */ --border-strong: rgba(10, 10, 10, .12); /* REGLA · Borde de seleccion/activo = hairline con contraste, NUNCA engrosar. Grosor siempre 1px en todos los estados. Seleccionado/activo: cambia el COLOR a --accent (= --text) y suma sombra; no subir a 1.5/2px (rompe el hairline, salto de layout, look pesado). Foco: anillo box-shadow adicional, no mas grosor. */ /* Radio "Muy sutil" */ --r-chip: 6px; --r-control: 8px; --r-input: 10px; --r-btn: 10px; --r-card: 12px; --r-pill: 999px; /* Sombras — escala de 5 niveles por elevacion (PCB R96). Cada token empieza con una capa 0 0 0 1px que imita el borde (PCB R55, se adapta a cualquier fondo) y suma capas direccionales con offset vertical y blur ~2x distancia (R53). sm=cards, md=dropdowns, lg=modales, xl=drawers, 2xl=flotantes criticos. */ --shadow-sm: 0 0 0 1px rgba(10,10,10,.04), 0 1px 2px rgba(10,10,10,.06); --shadow-md: 0 0 0 1px rgba(10,10,10,.04), 0 2px 4px -1px rgba(10,10,10,.08), 0 4px 8px -2px rgba(10,10,10,.06); --shadow-lg: 0 0 0 1px rgba(10,10,10,.04), 0 4px 8px -2px rgba(10,10,10,.10), 0 12px 24px -6px rgba(10,10,10,.10); --shadow-xl: 0 0 0 1px rgba(10,10,10,.04), 0 8px 16px -4px rgba(10,10,10,.12), 0 24px 48px -12px rgba(10,10,10,.14); --shadow-2xl: 0 0 0 1px rgba(10,10,10,.04), 0 16px 32px -8px rgba(10,10,10,.16), 0 40px 72px -16px rgba(10,10,10,.18); /* Compat: los componentes existentes usan card/soft/elevated via --vs-shadow-*. Aliasados a la escala. */ --shadow-card: var(--shadow-sm); --shadow-soft: var(--shadow-lg); --shadow-elevated: var(--shadow-xl); --shadow-inset: inset 0 1px 0 0 rgba(255,255,255,.06); /* Superficie / texto / acento (claro) — los usa Virtual Stripes (theme-aware) */ /* REGLA · Texto SIEMPRE theme-aware: pintar texto solo con --text/--text-muted/--accent (o un token con override en [data-ds-theme="dark"]). NUNCA un hex fijo ni un token compat sin override -> se vuelve invisible en dark. */ /* REGLA · Tarjeta blanca NUNCA sobre fondo blanco. --surface (#fff) no luce sobre --bg (#fff): el fondo DETRAS de tarjetas debe ser el gris tenue --surface-2 (#F9FAFB) para que la card blanca resalte. En dark se cumple solo (card --surface #161616 mas clara que --bg #0A0A0A, R57). */ --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F9FAFB; --text: #0A0A0A; --text-muted: #737373; --accent: #0A0A0A; --overlay: rgba(10,10,10,.45); /* MOTIF "Stripes" (marca Zebra). Lineas diagonales sutiles. SIEMPRE detras del contenido, NUNCA sobre cards. Web: clase .zebra-motif. PDF/deck: usar img motif-stripes(-dark).png (ZR-24). */ --motif-angle: 115deg; --motif-line: 2px; --motif-gap: 26px; --motif-opacity: .05; } /* REGLA · Impresion = siempre light. En @media print forzar los tokens a sus valores light (aunque data-ds-theme="dark" este puesto) y anular filtros de dark (logo invertido, etc.). Patron: @media print { :root, [data-ds-theme="dark"] { --bg:#fff; --surface:#fff; --text:#0A0A0A; --border:rgba(10,10,10,.10); ... color-scheme:light; } } */ /* Dark mode: solo lo activa el showcase del DS via [data-ds-theme="dark"]; el sitio nunca lo pone. */ [data-ds-theme="dark"] { --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.14); --bg: #0A0A0A; --surface: #161616; --surface-2: #1c1c1c; --text: #FFFFFF; --text-muted: #A3A3A3; --accent: #FFFFFF; --overlay: rgba(0,0,0,.6); --motif-opacity: .06; /* en dark las lineas (blancas) necesitan un pelin mas de presencia */ /* Escala de 5 niveles en dark (PCB R96). La capa 0 0 0 1px usa blanco tenue para definir el borde sobre fondo oscuro (R55); la profundidad se atenua (R56) usando negro denso. */ --shadow-sm: 0 0 0 1px rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px -1px rgba(0,0,0,.5); --shadow-lg: 0 0 0 1px rgba(255,255,255,.06), 0 6px 16px -4px rgba(0,0,0,.55); --shadow-xl: 0 0 0 1px rgba(255,255,255,.06), 0 12px 28px -8px rgba(0,0,0,.6); --shadow-2xl: 0 0 0 1px rgba(255,255,255,.07), 0 20px 44px -12px rgba(0,0,0,.65); /* PCB R56: en dark las cards del SITIO no llevan sombra exterior; la elevacion va por superficie mas clara (closer = lighter, R57). --surface (#161616) sobre --bg (#0A0A0A) es ~+4.7% de brillo, dentro del max ~12% (R58). El specimen del DS usa --vs-shadow-sm..2xl directos. */ --shadow-card: none; /* --shadow-soft/elevated aliasan la escala para overlays/modales (drawer, lightbox). */ --shadow-soft: var(--shadow-lg); --shadow-elevated: var(--shadow-xl); } /* Rampa ink invertida para dark mode (neutros sobre fondo oscuro). Espejo de la rampa light de global.css: de oscuro -> claro al subir el numero. Usa :root[data-ds-theme] (especificidad 0,2,0) para ganarle al `:root` de global.css sin depender del orden de import. El sitio nunca pone data-ds-theme, asi que conserva su rampa ink light. */ :root[data-ds-theme="dark"] { --ink-50: #1A1A1A; --ink-100: #222222; --ink-200: #2E2E2E; --ink-300: #404040; --ink-400: #737373; --ink-500: #A3A3A3; --ink-700: #E5E5E5; --ink-900: #F5F5F5; --ink: #FFFFFF; } /* MOTIF "Stripes" (marca Zebra) — clase utilitaria para WEB. Uso: contenedor con position:relative; como capa de fondo. - SIEMPRE detras del contenido (z-index:-1) y NUNCA sobre cards (ZR-20). - Color via currentColor: hereda --text, asi es theme-aware (negro en light, blanco en dark). - En PDF/deck NO usar este gradiente: usar la imagen /img/motif-stripes(-dark).png (ZR-24). */ .zebra-motif { position: absolute; inset: 0 0 0 auto; width: 38%; pointer-events: none; z-index: -1; color: var(--text); opacity: var(--motif-opacity); background-image: repeating-linear-gradient( var(--motif-angle), currentColor 0 var(--motif-line), transparent var(--motif-line) var(--motif-gap) ); }