/* ========================================================= SFV » Core Tokens (Design Tokens) - Somente variáveis - Sem estilos globais - Skins redefinem TOKENS GLOBAIS e TOKENS CONTEXTUAIS permitidos - Componentes consomem TOKENS CONTEXTUAIS - Sem compatibilidade com tokens legados ========================================================= */ #sfv-prestador-app, .sfv-scope{ /* ====================================================== TIPOGRAFIA / CORE NÃO-VISUAL ====================================================== */ --sfv-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Raios */ --sfv-r8: 8px; --sfv-r10: 10px; --sfv-r12: 12px; --sfv-r16: 16px; --sfv-r18: 18px; --sfv-r999: 999px; /* Espaçamentos */ --sfv-space-1: 6px; --sfv-space-2: 10px; --sfv-space-3: 14px; --sfv-space-4: 18px; --sfv-space-5: 22px; --sfv-space-6: 26px; /* Sombras */ --sfv-shadow-sm: 0 10px 30px rgba(0,0,0,.22); --sfv-shadow-md: 0 18px 40px rgba(0,0,0,.28); --sfv-shadow-lg: 0 22px 60px rgba(0,0,0,.34); /* Espessuras */ --sfv-line-w: 1px; --sfv-divider-w: 1px; --sfv-divider-strong-w: 1px; /* ====================================================== TOKENS GLOBAIS DE COR (SSOT DAS SKINS) ====================================================== */ /* Fundo / superfícies */ --sfv-color-bg: #141518; --sfv-color-surface: #1A1B1F; --sfv-color-surface-2: #121316; --sfv-color-surface-3: #202228; /* Texto */ --sfv-color-text: #FFFFFF; --sfv-color-text-strong: #FFFFFF; --sfv-color-text-muted: #838896; --sfv-color-text-soft: #A8AEBD; --sfv-color-heading: var(--sfv-color-text-strong); /* Borda / divisores */ --sfv-color-border: #26272B; --sfv-color-border-strong: #3A3C43; --sfv-color-divider: #2E3138; --sfv-color-divider-strong: #434751; --sfv-color-line-glow: rgba(255,255,255,.08); /* Overlay / foco / neutros */ --sfv-color-overlay: rgba(8,10,14,.68); --sfv-color-focus-ring: rgba(129, 98, 255, .38); --sfv-color-hover: rgba(255,255,255,.05); --sfv-color-active: rgba(255,255,255,.10); /* Campos */ --sfv-color-field-bg: rgba(255,255,255,.04); --sfv-color-field-bg-2: rgba(255,255,255,.06); --sfv-color-field-border: rgba(255,255,255,.12); --sfv-color-field-border-strong: rgba(255,255,255,.18); --sfv-color-placeholder: #94a3b8; /* Scroll */ --sfv-color-scrollbar: rgba(255,255,255,.12); --sfv-color-scrollbar-hover: rgba(255,255,255,.18); /* Semânticos */ --sfv-color-brand: #8162FF; --sfv-color-on-brand: #FFFFFF; --sfv-color-success: #16A34A; --sfv-color-on-success: #FFFFFF; --sfv-color-danger: #c70700; --sfv-color-on-danger: #FFFFFF; --sfv-color-info: #2F6BFF; --sfv-color-on-info: #FFFFFF; --sfv-color-warning: #f59e0b; --sfv-color-on-warning: #111111; --sfv-color-open: #21c700; --sfv-color-on-open: #081108; --sfv-color-closed: #c70700; --sfv-color-on-closed: #FFFFFF; /* ====================================================== TOKENS CONTEXTUAIS » BOTÕES ====================================================== */ --sfv-btn-bg: var(--sfv-color-surface); --sfv-btn-fg: var(--sfv-color-text); --sfv-btn-border: var(--sfv-color-border); --sfv-btn-hover-bg: var(--sfv-color-surface-2); --sfv-btn-hover-fg: var(--sfv-color-text); --sfv-btn-hover-border: var(--sfv-color-border-strong); --sfv-btn-active-bg: var(--sfv-color-surface-3); --sfv-btn-active-fg: var(--sfv-color-text); --sfv-btn-active-border: var(--sfv-color-border-strong); --sfv-btn-focus-ring: var(--sfv-color-focus-ring); --sfv-btn-primary-bg: var(--sfv-color-brand); --sfv-btn-primary-fg: var(--sfv-color-on-brand); --sfv-btn-primary-border: var(--sfv-color-brand); --sfv-btn-primary-hover-bg: color-mix(in srgb, var(--sfv-color-brand) 90%, var(--sfv-color-surface) 10%); --sfv-btn-primary-hover-fg: var(--sfv-color-on-brand); --sfv-btn-primary-hover-border: color-mix(in srgb, var(--sfv-color-brand) 92%, #000 8%); --sfv-btn-primary-active-bg: color-mix(in srgb, var(--sfv-color-brand) 84%, #000 16%); --sfv-btn-primary-active-fg: var(--sfv-color-on-brand); --sfv-btn-primary-active-border: color-mix(in srgb, var(--sfv-color-brand) 80%, #000 20%); --sfv-btn-danger-bg: var(--sfv-color-danger); --sfv-btn-danger-fg: var(--sfv-color-on-danger); --sfv-btn-danger-border: var(--sfv-color-danger); --sfv-btn-danger-hover-bg: color-mix(in srgb, var(--sfv-color-danger) 90%, var(--sfv-color-surface) 10%); --sfv-btn-danger-hover-fg: var(--sfv-color-on-danger); --sfv-btn-danger-hover-border: color-mix(in srgb, var(--sfv-color-danger) 92%, #000 8%); --sfv-btn-danger-active-bg: color-mix(in srgb, var(--sfv-color-danger) 84%, #000 16%); --sfv-btn-danger-active-fg: var(--sfv-color-on-danger); --sfv-btn-danger-active-border: color-mix(in srgb, var(--sfv-color-danger) 80%, #000 20%); --sfv-btn-success-bg: var(--sfv-color-success); --sfv-btn-success-fg: var(--sfv-color-on-success); --sfv-btn-success-border: var(--sfv-color-success); --sfv-btn-success-hover-bg: color-mix(in srgb, var(--sfv-color-success) 90%, var(--sfv-color-surface) 10%); --sfv-btn-success-hover-fg: var(--sfv-color-on-success); --sfv-btn-success-hover-border: color-mix(in srgb, var(--sfv-color-success) 92%, #000 8%); --sfv-btn-success-active-bg: color-mix(in srgb, var(--sfv-color-success) 84%, #000 16%); --sfv-btn-success-active-fg: var(--sfv-color-on-success); --sfv-btn-success-active-border: color-mix(in srgb, var(--sfv-color-success) 80%, #000 20%); --sfv-btn-info-bg: var(--sfv-color-info); --sfv-btn-info-fg: var(--sfv-color-on-info); --sfv-btn-info-border: var(--sfv-color-info); --sfv-btn-info-hover-bg: color-mix(in srgb, var(--sfv-color-info) 90%, var(--sfv-color-surface) 10%); --sfv-btn-info-hover-fg: var(--sfv-color-on-info); --sfv-btn-info-hover-border: color-mix(in srgb, var(--sfv-color-info) 92%, #000 8%); --sfv-btn-info-active-bg: color-mix(in srgb, var(--sfv-color-info) 84%, #000 16%); --sfv-btn-info-active-fg: var(--sfv-color-on-info); --sfv-btn-info-active-border: color-mix(in srgb, var(--sfv-color-info) 80%, #000 20%); --sfv-btn-warning-bg: var(--sfv-color-warning); --sfv-btn-warning-fg: var(--sfv-color-on-warning); --sfv-btn-warning-border: var(--sfv-color-warning); --sfv-btn-warning-hover-bg: color-mix(in srgb, var(--sfv-color-warning) 90%, var(--sfv-color-surface) 10%); --sfv-btn-warning-hover-fg: var(--sfv-color-on-warning); --sfv-btn-warning-hover-border: color-mix(in srgb, var(--sfv-color-warning) 92%, #000 8%); --sfv-btn-warning-active-bg: color-mix(in srgb, var(--sfv-color-warning) 84%, #000 16%); --sfv-btn-warning-active-fg: var(--sfv-color-on-warning); --sfv-btn-warning-active-border: color-mix(in srgb, var(--sfv-color-warning) 80%, #000 20%); --sfv-btn-muted-bg: var(--sfv-color-surface); --sfv-btn-muted-fg: var(--sfv-color-text); --sfv-btn-muted-border: var(--sfv-color-border); --sfv-btn-muted-hover-bg: var(--sfv-color-surface-2); --sfv-btn-muted-hover-fg: var(--sfv-color-text); --sfv-btn-muted-hover-border: var(--sfv-color-border-strong); --sfv-btn-muted-active-bg: var(--sfv-color-surface-3); --sfv-btn-muted-active-fg: var(--sfv-color-text); --sfv-btn-muted-active-border: var(--sfv-color-border-strong); /* ====================================================== TOKENS CONTEXTUAIS » BOTÕES DE AÇÃO DA FILA - Consumidos por assets/css/components/sfv-buttons.css - Classes reais: .sfv-btn--up .sfv-btn--down .sfv-btn--ok .sfv-btn--del - Skins podem sobrescrever estes tokens diretamente - Cores de fundo, texto, borda e ícone são independentes ====================================================== */ --sfv-fila-btn-bg: color-mix(in srgb, var(--sfv-color-border) 82%, #ffffff); --sfv-fila-btn-fg: var(--sfv-color-text); --sfv-fila-btn-border: color-mix(in srgb, var(--sfv-color-border) 55%, transparent); --sfv-fila-btn-hover-bg: var(--sfv-fila-btn-bg); --sfv-fila-btn-hover-fg: var(--sfv-fila-btn-fg); --sfv-fila-btn-hover-border: var(--sfv-fila-btn-border); --sfv-fila-btn-active-bg: var(--sfv-fila-btn-bg); --sfv-fila-btn-active-fg: var(--sfv-fila-btn-fg); --sfv-fila-btn-active-border: var(--sfv-fila-btn-border); --sfv-fila-btn-focus-ring: var(--sfv-btn-focus-ring); /* UP = mover para cima */ --sfv-fila-btn-up-bg: var(--sfv-color-info); --sfv-fila-btn-up-fg: var(--sfv-color-on-info); --sfv-fila-btn-up-icon: var(--sfv-fila-btn-up-fg); --sfv-fila-btn-up-border: color-mix(in srgb, var(--sfv-fila-btn-up-bg) 80%, transparent); --sfv-fila-btn-up-hover-bg: color-mix(in srgb, var(--sfv-fila-btn-up-bg) 90%, #000 10%); --sfv-fila-btn-up-hover-fg: var(--sfv-fila-btn-up-fg); --sfv-fila-btn-up-hover-icon: var(--sfv-fila-btn-up-icon); --sfv-fila-btn-up-hover-border: color-mix(in srgb, var(--sfv-fila-btn-up-bg) 86%, transparent); --sfv-fila-btn-up-active-bg: color-mix(in srgb, var(--sfv-fila-btn-up-bg) 82%, #000 18%); --sfv-fila-btn-up-active-fg: var(--sfv-fila-btn-up-fg); --sfv-fila-btn-up-active-icon: var(--sfv-fila-btn-up-hover-icon); --sfv-fila-btn-up-active-border: color-mix(in srgb, var(--sfv-fila-btn-up-bg) 80%, transparent); /* DOWN = mover para baixo */ --sfv-fila-btn-down-bg: var(--sfv-color-info); --sfv-fila-btn-down-fg: var(--sfv-color-on-info); --sfv-fila-btn-down-icon: var(--sfv-fila-btn-down-fg); --sfv-fila-btn-down-border: color-mix(in srgb, var(--sfv-fila-btn-down-bg) 80%, transparent); --sfv-fila-btn-down-hover-bg: color-mix(in srgb, var(--sfv-fila-btn-down-bg) 90%, #000 10%); --sfv-fila-btn-down-hover-fg: var(--sfv-fila-btn-down-fg); --sfv-fila-btn-down-hover-icon: var(--sfv-fila-btn-down-icon); --sfv-fila-btn-down-hover-border: color-mix(in srgb, var(--sfv-fila-btn-down-bg) 86%, transparent); --sfv-fila-btn-down-active-bg: color-mix(in srgb, var(--sfv-fila-btn-down-bg) 82%, #000 18%); --sfv-fila-btn-down-active-fg: var(--sfv-fila-btn-down-fg); --sfv-fila-btn-down-active-icon: var(--sfv-fila-btn-down-hover-icon); --sfv-fila-btn-down-active-border: color-mix(in srgb, var(--sfv-fila-btn-down-bg) 80%, transparent); /* OK = marcar como atendido */ --sfv-fila-btn-ok-bg: var(--sfv-color-success); --sfv-fila-btn-ok-fg: var(--sfv-color-on-success); --sfv-fila-btn-ok-icon: var(--sfv-fila-btn-ok-fg); --sfv-fila-btn-ok-border: color-mix(in srgb, var(--sfv-fila-btn-ok-bg) 80%, transparent); --sfv-fila-btn-ok-hover-bg: color-mix(in srgb, var(--sfv-fila-btn-ok-bg) 90%, #000 10%); --sfv-fila-btn-ok-hover-fg: var(--sfv-fila-btn-ok-fg); --sfv-fila-btn-ok-hover-icon: var(--sfv-fila-btn-ok-icon); --sfv-fila-btn-ok-hover-border: color-mix(in srgb, var(--sfv-fila-btn-ok-bg) 86%, transparent); --sfv-fila-btn-ok-active-bg: color-mix(in srgb, var(--sfv-fila-btn-ok-bg) 82%, #000 18%); --sfv-fila-btn-ok-active-fg: var(--sfv-fila-btn-ok-fg); --sfv-fila-btn-ok-active-icon: var(--sfv-fila-btn-ok-hover-icon); --sfv-fila-btn-ok-active-border: color-mix(in srgb, var(--sfv-fila-btn-ok-bg) 80%, transparent); /* DEL = excluir cliente */ --sfv-fila-btn-del-bg: var(--sfv-color-danger); --sfv-fila-btn-del-fg: var(--sfv-color-on-danger); --sfv-fila-btn-del-icon: var(--sfv-fila-btn-del-fg); --sfv-fila-btn-del-border: color-mix(in srgb, var(--sfv-fila-btn-del-bg) 80%, transparent); --sfv-fila-btn-del-hover-bg: color-mix(in srgb, var(--sfv-fila-btn-del-bg) 90%, #000 10%); --sfv-fila-btn-del-hover-fg: var(--sfv-fila-btn-del-fg); --sfv-fila-btn-del-hover-icon: var(--sfv-fila-btn-del-icon); --sfv-fila-btn-del-hover-border: color-mix(in srgb, var(--sfv-fila-btn-del-bg) 86%, transparent); --sfv-fila-btn-del-active-bg: color-mix(in srgb, var(--sfv-fila-btn-del-bg) 82%, #000 18%); --sfv-fila-btn-del-active-fg: var(--sfv-fila-btn-del-fg); --sfv-fila-btn-del-active-icon: var(--sfv-fila-btn-del-hover-icon); --sfv-fila-btn-del-active-border: color-mix(in srgb, var(--sfv-fila-btn-del-bg) 80%, transparent); /* Mantido fora do escopo principal dos botões up/down/ok/del */ --sfv-btn-time-ok-bg: #f9fc58; --sfv-btn-time-ok-fg: #ffffff; --sfv-btn-time-ok-border: #f9fc58; --sfv-btn-time-ok-hover-bg: #f9fc58; --sfv-btn-time-ok-hover-fg: #ffffff; --sfv-btn-time-ok-hover-border: #f9fc58; --sfv-btn-time-ok-active-bg: #f9fc58; --sfv-btn-time-ok-active-fg: #ffffff; --sfv-btn-time-ok-active-border: #f9fc58; /* ====================================================== TOKENS CONTEXTUAIS » INPUTS / FORM ====================================================== */ --sfv-input-bg: var(--sfv-color-field-bg); --sfv-input-fg: var(--sfv-color-text); --sfv-input-placeholder: var(--sfv-color-placeholder); --sfv-input-border: var(--sfv-color-field-border); --sfv-input-focus-border: var(--sfv-color-field-border-strong); --sfv-input-focus-ring: var(--sfv-color-focus-ring); --sfv-input-label: var(--sfv-color-text-strong); --sfv-form-error-bg: color-mix(in srgb, var(--sfv-color-danger) 10%, transparent); --sfv-form-error-fg: color-mix(in srgb, var(--sfv-color-danger) 78%, #ffffff 22%); --sfv-form-error-border: color-mix(in srgb, var(--sfv-color-danger) 34%, transparent); /* ====================================================== TOKENS CONTEXTUAIS » MODAL ====================================================== */ --sfv-modal-backdrop: color-mix(in srgb, var(--sfv-color-bg) 74%, transparent); --sfv-modal-bg: var(--sfv-color-surface-2); --sfv-modal-fg: var(--sfv-color-text); --sfv-modal-border: var(--sfv-color-border); --sfv-modal-shadow: var(--sfv-shadow-md); --sfv-modal-title: var(--sfv-color-text-strong); --sfv-modal-eyebrow: var(--sfv-color-text-muted); --sfv-modal-radius: var(--sfv-r18); --sfv-modal-close-bg: color-mix(in srgb, var(--sfv-color-danger) 18%, var(--sfv-color-surface-2)); --sfv-modal-close-border: color-mix(in srgb, var(--sfv-color-danger) 55%, var(--sfv-color-border)); --sfv-modal-close-fg: var(--sfv-color-danger); --sfv-modal-close-hover-bg: color-mix(in srgb, var(--sfv-color-danger) 26%, var(--sfv-color-surface-2)); --sfv-modal-close-hover-border: var(--sfv-color-danger); --sfv-modal-close-hover-fg: var(--sfv-color-danger); /* ====================================================== TOKENS CONTEXTUAIS » CARDS / SUPERFÍCIES ====================================================== */ --sfv-card-bg: var(--sfv-color-surface-2); --sfv-card-fg: var(--sfv-color-text); --sfv-card-border: var(--sfv-color-border); --sfv-card-hover-bg: var(--sfv-color-surface-3); --sfv-card-shadow: var(--sfv-shadow-sm); --sfv-card-icon: var(--sfv-color-text-muted); --sfv-card-title: var(--sfv-color-text-strong); --sfv-card-muted: var(--sfv-color-text-muted); /* ====================================================== TOKENS CONTEXTUAIS » PANELS ====================================================== */ --sfv-panel-bg: var(--sfv-color-surface-2); --sfv-panel-fg: var(--sfv-color-text); --sfv-panel-border: var(--sfv-color-border); --sfv-panel-shadow: var(--sfv-shadow-sm); --sfv-panel-title: var(--sfv-color-text-strong); --sfv-panel-text: var(--sfv-color-text); --sfv-panel-muted: var(--sfv-color-text-muted); --sfv-panel-icon: var(--sfv-color-text-muted); --sfv-panel-divider: var(--sfv-color-divider); --sfv-panel-divider-strong: var(--sfv-color-divider-strong); --sfv-panel-avatar-ring: color-mix(in srgb, var(--sfv-color-text-strong) 28%, transparent); --sfv-panel-avatar-placeholder: color-mix(in srgb, var(--sfv-color-border) 72%, transparent); /* ====================================================== TOKENS CONTEXTUAIS » PRESTADOR CARD ====================================================== */ --sfv-prest-card-bg: var(--sfv-panel-bg); --sfv-prest-card-border: var(--sfv-panel-border); --sfv-prest-card-shadow: var(--sfv-panel-shadow); --sfv-prest-card-radius: 14px; --sfv-prest-card-divider: var(--sfv-panel-divider); --sfv-prest-card-divider-strong: var(--sfv-panel-divider-strong); --sfv-prest-card-title: var(--sfv-panel-title); --sfv-prest-card-text: var(--sfv-panel-text); --sfv-prest-card-muted: var(--sfv-panel-muted); --sfv-prest-card-number: var(--sfv-panel-title); --sfv-prest-card-avatar-ring: var(--sfv-panel-avatar-ring); --sfv-prest-card-avatar-shadow: 0 0 0 1px color-mix(in srgb, var(--sfv-prest-card-border) 78%, transparent), 0 10px 24px rgba(0,0,0,.25); --sfv-prest-card-avatar-placeholder: var(--sfv-panel-avatar-placeholder); --sfv-prest-card-accent: var(--sfv-color-brand); --sfv-prest-card-selected-border: color-mix(in srgb, var(--sfv-prest-card-accent) 55%, var(--sfv-prest-card-border)); --sfv-prest-card-selected-shadow: 0 0 0 2px color-mix(in srgb, var(--sfv-prest-card-accent) 22%, transparent), var(--sfv-prest-card-shadow); /* ====================================================== TOKENS CONTEXTUAIS » NAV ====================================================== */ --sfv-nav-bg: var(--sfv-color-surface); --sfv-nav-fg: var(--sfv-color-text); --sfv-nav-border: var(--sfv-color-divider); --sfv-nav-shadow: var(--sfv-shadow-md); --sfv-nav-hover-bg: var(--sfv-color-hover); --sfv-nav-active-bg: var(--sfv-color-surface-2); --sfv-nav-active-fg: var(--sfv-color-text-strong); /* Ícones do menu lateral */ --sfv-nav-icon-color: var(--sfv-color-text-muted); --sfv-nav-icon-hover-color: var(--sfv-color-text); --sfv-nav-icon-active-color: var(--sfv-color-text-strong); --sfv-nav-icon-size: 18px; /* ====================================================== TOKENS CONTEXTUAIS » RESET ====================================================== */ --sfv-reset-bg: var(--sfv-color-surface-2); --sfv-reset-fg: var(--sfv-color-text); --sfv-reset-border: var(--sfv-color-border); --sfv-reset-shadow: var(--sfv-shadow-sm); --sfv-reset-title: var(--sfv-color-text-strong); --sfv-reset-muted: var(--sfv-color-text-muted); --sfv-reset-icon: var(--sfv-color-text-muted); /* ====================================================== TOKENS CONTEXTUAIS » BADGES / PILLS ====================================================== */ --sfv-badge-radius: var(--sfv-r999); --sfv-badge-border-w: 1px; --sfv-badge-shadow: 0 10px 22px rgba(0,0,0,.25); --sfv-badge-font-size: 12px; --sfv-badge-font-weight: 1000; --sfv-badge-padding-y: 4px; --sfv-badge-padding-x: 10px; --sfv-badge-open-border: color-mix(in srgb, var(--sfv-color-open) 78%, #000); --sfv-badge-closed-border: color-mix(in srgb, var(--sfv-color-closed) 78%, #000); --sfv-pill-bg: var(--sfv-color-surface); --sfv-pill-fg: var(--sfv-color-text); --sfv-pill-border: var(--sfv-color-border); /* ====================================================== TOKENS CONTEXTUAIS » ÍCONES GERAIS DO SAAS ====================================================== */ --sfv-icon-color: var(--sfv-color-text); --sfv-icon-muted-color: var(--sfv-color-text-muted); --sfv-icon-strong-color: var(--sfv-color-text-strong); --sfv-icon-danger-color: var(--sfv-color-danger); --sfv-icon-success-color: var(--sfv-color-success); --sfv-icon-warning-color: var(--sfv-color-warning); --sfv-icon-info-color: var(--sfv-color-info); --sfv-icon-size-sm: 14px; --sfv-icon-size-md: 18px; --sfv-icon-size-lg: 22px; }