/* ========================================================================== Design tokens — single source of truth for colors, spacing, type, etc. Change values here to re-theme the whole app. ========================================================================== */ :root { /* Surfaces */ --color-bg: #F3F4F6; --color-surface: #FFFFFF; --color-surface-muted: #F9FAFB; --color-border: #E5E7EB; --color-border-strong: #D1D5DB; /* Header (dark navy) — Employer brand: Black 6C -> Pantone 282C */ --color-header-from: #0E1021; --color-header-to: #24304D; /* Brand / primary — Employer brand secondary blue, Pantone 7685C */ --color-primary: #1052A0; --color-primary-hover: #0D407D; --color-primary-active: #0A3160; --color-primary-light: #EAF2FB; --color-primary-light-strong: #D3E3F2; --color-primary-border: #A8C4E3; /* Dark (secondary "black" buttons) — Employer brand principal, Pantone 282C */ --color-dark: #24304D; /* Employer brand tertiary — small decorative details only, never large fills */ --color-accent: #FDC40A; /* Feedback */ --color-success: #16A34A; --color-success-light: #DCFCE7; --color-success-border: #BBF7D0; --color-success-text: #15803D; --color-danger: #DC2626; --color-danger-hover: #B91C1C; --color-danger-light: #FEF2F2; /* Pantone 7548 C (C0 M25 Y93 K0 / R253 G196 B0) — -light/-text are tints/shades of it kept for badge background/text contrast, not independently chosen colors. */ --color-warning: #FDC40A; --color-warning-light: #FFF7DD; --color-warning-text: #7A5A00; /* Text */ --color-text: #111827; --color-text-secondary: #374151; --color-text-muted: #6B7280; --color-text-faint: #9CA3AF; --color-text-inverse: #FFFFFF; /* Fixed-dark surface for chips that must stay dark regardless of page theme (toast notifications) — deliberately not redefined in the dark block. */ --color-toast-bg: #1E2A42; /* Typography — Employer brand manual mandates Montserrat for institutional material */ --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5rem; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-full: 9999px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16); --shadow-up: 0 -4px 16px rgba(15, 23, 42, 0.06); /* Layout */ --layout-max-width: 1000px; --z-header: 40; --z-action-bar: 30; --z-bg-sync: 50; --z-modal: 100; --z-toast: 200; } /* Escala tipográfica reduzida em telas estreitas — os três tamanhos maiores (título de tela, título de hub/gate) ficavam grandes demais num celular, empurrando o conteúdo útil para fora da primeira dobra sem ganhar legibilidade real. --text-sm/--text-xs (corpo, rótulos) não mudam: texto pequeno já está no tamanho que precisa estar. */ @media (max-width: 640px) { :root { --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.3125rem; } } /* ========================================================================== Dark theme — redefines the same tokens; every component already reads through var(), so this is the only place dark mode needs to be taught about a color. Toggled by js/utils/theme.js via [data-theme] on . NOT redefined here (deliberately theme-independent, always the same value): --color-header-from/to, --color-accent, --color-text-inverse, --color-toast-bg — these back chrome that's always-dark regardless of page theme (header, toasts) or a brand color that reads fine on both. ========================================================================== */ :root[data-theme="dark"] { --color-bg: #0B1220; --color-surface: #141B2E; --color-surface-muted: #1B2740; --color-border: #2A3650; --color-border-strong: #3D4C6E; --color-primary: #3B82C9; --color-primary-hover: #59A0E0; --color-primary-active: #7AB6EA; --color-primary-light: #16233D; --color-primary-light-strong: #1C2E4D; --color-primary-border: #2E4670; --color-dark: #2A3650; --color-success: #22C55E; --color-success-light: #132A1C; --color-success-border: #1E3B27; --color-success-text: #4ADE80; --color-danger: #F87171; --color-danger-hover: #FCA5A5; --color-danger-light: #2C1618; /* Same Pantone 7548 C as the light theme — -light/-text are just a dark-mode-appropriate tint/shade of it. */ --color-warning: #FDC40A; --color-warning-light: #3D2E00; --color-warning-text: #FDE68A; --color-text: #F1F5F9; --color-text-secondary: #CBD5E1; --color-text-muted: #94A3B8; --color-text-faint: #64748B; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); --shadow-up: 0 -4px 16px rgba(0, 0, 0, 0.35); }