/* ========================================================================== FixLock — Tokens de identidade visual -------------------------------------------------------------------------- Este arquivo contém APENAS valores. Nenhuma regra de componente. Carregado depois do Bootstrap e antes de theme.css. Para trocar a cor da marca, altere --fx-red-500 e recalcule a escala. Os componentes referenciam os tokens semânticos (bloco 2), nunca a escala primitiva (bloco 1). ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. PRIMITIVOS ---------------------------------------------------------------------- */ /* Vermelho da marca — HSL(356, 67%, 52%). Derivado do #ED402D anterior: saturação -17pts e matiz deslocada de 6° para 356°, saindo do vermelho-laranja (lido como alerta) para o vermelho puro (lido como marca). Contraste de #FFFFFF sobre --fx-red-500: 4,79:1 (WCAG AA). */ --fx-red-50: #FEF3F3; --fx-red-100: #FDE4E5; --fx-red-200: #FBC9CC; --fx-red-300: #F5A3A8; --fx-red-400: #EA7078; --fx-red-500: #D6323C; --fx-red-600: #C02932; --fx-red-700: #A2222A; --fx-red-800: #831C23; --fx-red-900: #5E141A; /* Neutros — respondem pela maior parte da superfície da interface */ --fx-gray-0: #FFFFFF; --fx-gray-25: #FCFCFD; --fx-gray-50: #F9FAFB; --fx-gray-100: #F2F4F7; --fx-gray-200: #EAECF0; --fx-gray-300: #D0D5DD; --fx-gray-400: #98A2B3; --fx-gray-500: #667085; --fx-gray-600: #475467; --fx-gray-700: #344054; --fx-gray-800: #1D2939; --fx-gray-900: #101828; /* Semânticas de status */ --fx-green-50: #ECFDF3; --fx-green-500: #12B76A; --fx-green-700: #027A48; --fx-amber-50: #FFFAEB; --fx-amber-500: #F79009; --fx-amber-700: #B54708; --fx-blue-50: #EFF8FF; --fx-blue-500: #2E90FA; --fx-blue-700: #175CD3; /* ---------------------------------------------------------------------- 2. SEMÂNTICOS Os componentes usam SEMPRE estes. Trocar a marca = trocar o mapeamento. ---------------------------------------------------------------------- */ /* Marca e ação */ --fx-color-primary: var(--fx-red-500); --fx-color-primary-hover: var(--fx-red-600); --fx-color-primary-active: var(--fx-red-800); --fx-color-primary-subtle: var(--fx-red-50); --fx-color-primary-subtle-hover: var(--fx-red-100); --fx-color-on-primary: var(--fx-gray-0); /* Perigo — deliberadamente MAIS ESCURO que o primário. O vermelho preenchido é da marca; o vermelho vazado é do perigo. */ --fx-color-danger: var(--fx-red-700); --fx-color-danger-hover: var(--fx-red-800); --fx-color-danger-subtle: var(--fx-red-50); /* Status */ --fx-color-success: var(--fx-green-700); --fx-color-success-subtle: var(--fx-green-50); --fx-color-warning: var(--fx-amber-700); --fx-color-warning-subtle: var(--fx-amber-50); --fx-color-info: var(--fx-blue-700); --fx-color-info-subtle: var(--fx-blue-50); --fx-color-neutral: var(--fx-gray-500); --fx-color-neutral-subtle: var(--fx-gray-50); /* Superfícies */ --fx-surface: var(--fx-gray-0); --fx-surface-page: var(--fx-gray-25); --fx-surface-sunken: var(--fx-gray-50); --fx-surface-hover: var(--fx-gray-50); --fx-surface-selected: var(--fx-red-50); /* Cabeçalho de tabela — cinza mais escuro, para separar do corpo */ --fx-table-head-bg: var(--fx-gray-200); --fx-table-head-text: var(--fx-gray-700); /* Bordas */ --fx-border: var(--fx-gray-200); --fx-border-strong: var(--fx-gray-300); --fx-border-focus: var(--fx-red-400); /* Texto */ --fx-text-heading: var(--fx-gray-900); --fx-text-body: var(--fx-gray-700); --fx-text-muted: var(--fx-gray-500); /* gray-500, e não gray-400: em gray-400 o placeholder fica em 2,58:1 sobre branco e reprova no AA. Em gray-500 dá 4,76:1 e ainda se distingue do texto de corpo, que está em 10,46:1. */ --fx-text-placeholder: var(--fx-gray-500); --fx-text-on-primary: var(--fx-gray-0); --fx-text-link: var(--fx-red-700); --fx-text-link-hover: var(--fx-red-800); /* Anel de foco — visível e independente de cor de fundo */ --fx-focus-ring: 0 0 0 3px rgba(214, 50, 60, .28); --fx-focus-ring-neutral: 0 0 0 3px rgba(102, 112, 133, .24); /* ---------------------------------------------------------------------- 3. RAIO ---------------------------------------------------------------------- */ --fx-radius-xs: 4px; --fx-radius-sm: 6px; --fx-radius-md: 8px; --fx-radius-lg: 12px; --fx-radius-xl: 16px; --fx-radius-full: 9999px; /* ---------------------------------------------------------------------- 4. SOMBRA — suaves; profundidade vem da borda, não da sombra ---------------------------------------------------------------------- */ --fx-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05); --fx-shadow-sm: 0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06); --fx-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06); --fx-shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03); /* ---------------------------------------------------------------------- 5. ESPAÇAMENTO — escala de 4px ---------------------------------------------------------------------- */ --fx-space-1: 4px; --fx-space-2: 8px; --fx-space-3: 12px; --fx-space-4: 16px; --fx-space-5: 20px; --fx-space-6: 24px; --fx-space-8: 32px; --fx-space-10: 40px; --fx-space-12: 48px; /* ---------------------------------------------------------------------- 6. TIPOGRAFIA ---------------------------------------------------------------------- */ /* Open Sans. A pilha de fallback usa fontes de sistema com métricas próximas, para que o texto siga legível se a fonte externa não carregar. */ --fx-font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* O Open Sans tem altura-x maior que a do Roboto: no mesmo px ele parece maior. Os tamanhos de corpo caem 1px em relação à escala anterior para compensar; os títulos mantêm o tamanho, onde o ganho de presença ajuda. */ --fx-font-size-xs: 12px; --fx-font-size-sm: 13px; --fx-font-size-base: 14px; --fx-font-size-md: 16px; --fx-font-size-lg: 19px; --fx-font-size-xl: 23px; --fx-font-size-2xl: 30px; /* O Open Sans não tem peso 500. O "medium" mapeia para 600, senão o navegador sintetiza um peso falso e o texto fica borrado. */ --fx-font-weight-regular: 400; --fx-font-weight-medium: 600; --fx-font-weight-semibold: 600; --fx-font-weight-bold: 700; /* Altura-x maior pede entrelinha um pouco mais folgada */ --fx-line-height-tight: 1.3; --fx-line-height-base: 1.55; --fx-line-height-relaxed: 1.7; /* ---------------------------------------------------------------------- 7. ALTURA DE CONTROLE — substitui as alturas fixas inline ---------------------------------------------------------------------- */ --fx-control-height-sm: 34px; --fx-control-height-md: 42px; --fx-control-height-lg: 48px; /* ---------------------------------------------------------------------- 8. MOVIMENTO ---------------------------------------------------------------------- */ --fx-transition-fast: 120ms ease; --fx-transition-base: 150ms ease; --fx-transition-slow: 240ms ease; /* ---------------------------------------------------------------------- 9. LAYOUT ---------------------------------------------------------------------- */ --fx-sidebar-width: 262px; --fx-topbar-height: 60px; --fx-z-sticky: 100; --fx-z-modal: 1050; } /* Respeita quem pede menos movimento no sistema operacional */ @media (prefers-reduced-motion: reduce) { :root { --fx-transition-fast: 0ms; --fx-transition-base: 0ms; --fx-transition-slow: 0ms; } }