/* Design tokens — tema escuro/claro, Material 3 / HIG oriented. * Compatível com ADR-0048 (shell) e ADR-0050 (tema claro). */ /* -------------------------------------------------------------------------- * Referência / paleta primitiva (baseada na marca teal #0D9488). * Valores fixos; não usam diretamente os componentes. * -------------------------------------------------------------------------- */ :root { --ref-palette-primary0: #000000; --ref-palette-primary10: #00201D; --ref-palette-primary20: #003732; --ref-palette-primary30: #005049; --ref-palette-primary40: #0D9488; --ref-palette-primary50: #14B8A6; --ref-palette-primary60: #2DD4BF; --ref-palette-primary70: #5EEAD4; --ref-palette-primary80: #99F6E4; --ref-palette-primary90: #CCFBF1; --ref-palette-primary95: #E6FFFA; --ref-palette-primary99: #F2FFFD; --ref-palette-primary100: #FFFFFF; --ref-palette-neutral0: #000000; --ref-palette-neutral10: #1C1B1F; --ref-palette-neutral20: #313033; --ref-palette-neutral30: #484649; --ref-palette-neutral40: #605D62; --ref-palette-neutral50: #787579; --ref-palette-neutral60: #939094; --ref-palette-neutral70: #AEAAAE; --ref-palette-neutral80: #CAC4D0; --ref-palette-neutral90: #E6E1E5; --ref-palette-neutral95: #F4EFF4; --ref-palette-neutral99: #FFFBFE; --ref-palette-neutral100: #FFFFFF; --ref-palette-error0: #000000; --ref-palette-error10: #410E0B; --ref-palette-error20: #601410; --ref-palette-error30: #8C1D18; --ref-palette-error40: #B3261E; --ref-palette-error50: #DC362E; --ref-palette-error60: #E46962; --ref-palette-error70: #EC928E; --ref-palette-error80: #F2B8B5; --ref-palette-error90: #F9DEDC; --ref-palette-error95: #FCECEB; --ref-palette-error99: #FFF8F7; --ref-palette-error100: #FFFFFF; --ref-palette-success40: #2E7D32; --ref-palette-success90: #D6F5D6; --ref-palette-warning40: #B26A00; --ref-palette-warning90: #FFF0D6; } /* -------------------------------------------------------------------------- * Tokens semânticos — tema ESCURO (default). * -------------------------------------------------------------------------- */ :root { --color-primary: var(--ref-palette-primary40); --color-on-primary: var(--ref-palette-primary100); --color-primary-container: var(--ref-palette-primary30); --color-on-primary-container: var(--ref-palette-primary90); --color-surface: var(--ref-palette-neutral10); --color-surface-variant: #2A2830; --color-on-surface: var(--ref-palette-neutral95); --color-on-surface-variant: var(--ref-palette-neutral80); --color-bg: var(--ref-palette-neutral0); --color-on-bg: var(--ref-palette-neutral100); --color-outline: var(--ref-palette-neutral40); --color-outline-variant: var(--ref-palette-neutral30); --color-error: var(--ref-palette-error80); --color-on-error: var(--ref-palette-error20); --color-error-container: var(--ref-palette-error30); --color-on-error-container: var(--ref-palette-error90); --color-success: var(--ref-palette-success90); --color-on-success: #003300; --color-success-container: rgba(46,125,50,0.22); --color-on-success-container: var(--color-success); --color-warning: var(--ref-palette-warning90); --color-on-warning: #3D1F00; --color-warning-container: rgba(178,106,0,0.22); --color-on-warning-container: var(--color-warning); --color-info: #BFE3FF; --color-on-info: #00335C; --color-info-container: rgba(25,118,210,0.22); --color-on-info-container: var(--color-info); /* Tokens legados mantidos para compatibilidade (deprecated). */ --color-brand: var(--color-primary); --color-brand-focus: var(--ref-palette-primary70); --color-fg: var(--color-on-surface); --color-muted: var(--color-on-surface-variant); --color-danger: var(--color-error); --color-ok: var(--color-success); --color-warn: var(--color-warning); --color-on-surface-rgb: 230,225,229; --color-bg-rgb: 0,0,0; } /* -------------------------------------------------------------------------- * Tokens semânticos — tema CLARO. * Ativado por prefers-color-scheme OU por data-theme="light" no . * -------------------------------------------------------------------------- */ @media (prefers-color-scheme: light) { :root { --color-primary: var(--ref-palette-primary40); --color-on-primary: var(--ref-palette-primary100); --color-primary-container: var(--ref-palette-primary90); --color-on-primary-container: var(--ref-palette-primary10); --color-surface: var(--ref-palette-neutral99); --color-surface-variant: #F2EFF5; --color-on-surface: var(--ref-palette-neutral10); --color-on-surface-variant: var(--ref-palette-neutral40); --color-bg: #FAF9FB; --color-on-bg: var(--ref-palette-neutral10); --color-outline: var(--ref-palette-neutral50); --color-outline-variant: #C8C5CA; --color-error: var(--ref-palette-error40); --color-on-error: var(--ref-palette-error100); --color-error-container: var(--ref-palette-error90); --color-on-error-container: var(--ref-palette-error10); --color-success: var(--ref-palette-success40); --color-on-success: var(--ref-palette-success90); --color-success-container: var(--ref-palette-success90); --color-on-success-container: #002D00; --color-warning: var(--ref-palette-warning40); --color-on-warning: var(--ref-palette-warning90); --color-warning-container: var(--ref-palette-warning90); --color-on-warning-container: #2B1500; --color-info: #00639C; --color-on-info: #E3F2FD; --color-info-container: #E3F2FD; --color-on-info-container: #001D36; --color-brand: var(--color-primary); --color-brand-focus: var(--ref-palette-primary50); --color-fg: var(--color-on-surface); --color-muted: var(--color-on-surface-variant); --color-danger: var(--color-error); --color-ok: var(--color-success); --color-warn: var(--color-warning); --color-on-surface-rgb: 28,27,31; --color-bg-rgb: 250,249,251; } } [data-theme="light"] { --color-primary: var(--ref-palette-primary40); --color-on-primary: var(--ref-palette-primary100); --color-primary-container: var(--ref-palette-primary90); --color-on-primary-container: var(--ref-palette-primary10); --color-surface: var(--ref-palette-neutral99); --color-surface-variant: #F2EFF5; --color-on-surface: var(--ref-palette-neutral10); --color-on-surface-variant: var(--ref-palette-neutral40); --color-bg: #FAF9FB; --color-on-bg: var(--ref-palette-neutral10); --color-outline: var(--ref-palette-neutral50); --color-outline-variant: #C8C5CA; --color-error: var(--ref-palette-error40); --color-on-error: var(--ref-palette-error100); --color-error-container: var(--ref-palette-error90); --color-on-error-container: var(--ref-palette-error10); --color-success: var(--ref-palette-success40); --color-on-success: var(--ref-palette-success90); --color-success-container: var(--ref-palette-success90); --color-on-success-container: #002D00; --color-warning: var(--ref-palette-warning40); --color-on-warning: var(--ref-palette-warning90); --color-warning-container: var(--ref-palette-warning90); --color-on-warning-container: #2B1500; --color-info: #00639C; --color-on-info: #E3F2FD; --color-info-container: #E3F2FD; --color-on-info-container: #001D36; --color-brand: var(--color-primary); --color-brand-focus: var(--ref-palette-primary50); --color-fg: var(--color-on-surface); --color-muted: var(--color-on-surface-variant); --color-danger: var(--color-error); --color-ok: var(--color-success); --color-warn: var(--color-warning); --color-on-surface-rgb: 28,27,31; --color-bg-rgb: 250,249,251; } /* Force escuro explicitamente (caso sistema seja light e usuário escolha dark). */ [data-theme="dark"] { --color-primary: var(--ref-palette-primary40); --color-on-primary: var(--ref-palette-primary100); --color-primary-container: var(--ref-palette-primary30); --color-on-primary-container: var(--ref-palette-primary90); --color-surface: var(--ref-palette-neutral10); --color-surface-variant: #2A2830; --color-on-surface: var(--ref-palette-neutral95); --color-on-surface-variant: var(--ref-palette-neutral80); --color-bg: var(--ref-palette-neutral0); --color-on-bg: var(--ref-palette-neutral100); --color-outline: var(--ref-palette-neutral40); --color-outline-variant: var(--ref-palette-neutral30); --color-error: var(--ref-palette-error80); --color-on-error: var(--ref-palette-error20); --color-error-container: var(--ref-palette-error30); --color-on-error-container: var(--ref-palette-error90); --color-success: var(--ref-palette-success90); --color-on-success: #003300; --color-success-container: rgba(46,125,50,0.22); --color-on-success-container: var(--color-success); --color-warning: var(--ref-palette-warning90); --color-on-warning: #3D1F00; --color-warning-container: rgba(178,106,0,0.22); --color-on-warning-container: var(--color-warning); --color-info: #BFE3FF; --color-on-info: #00335C; --color-info-container: rgba(25,118,210,0.22); --color-on-info-container: var(--color-info); --color-brand: var(--color-primary); --color-brand-focus: var(--ref-palette-primary70); --color-fg: var(--color-on-surface); --color-muted: var(--color-on-surface-variant); --color-danger: var(--color-error); --color-ok: var(--color-success); --color-warn: var(--color-warning); --color-on-surface-rgb: 230,225,229; --color-bg-rgb: 0,0,0; } /* -------------------------------------------------------------------------- * Outros tokens (densidade, tipografia, layout) — independentes de tema. * -------------------------------------------------------------------------- */ :root { --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.85rem; --space-4: 1.25rem; --space-5: 1.75rem; --radius: 0.5rem; --radius-lg: 0.75rem; --font-ui: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --text-xs: 0.75rem; --text-sm: 0.85rem; --text-md: 0.95rem; --text-lg: 1.15rem; --text-xl: 1.35rem; --sidebar-w: 15.5rem; --sidebar-w-collapsed: 4.25rem; --topbar-h: 3.25rem; --row-h: 2.65rem; --elevation-1: 0 1px 2px 0 rgba(var(--color-on-surface-rgb), 0.08), 0 1px 3px 1px rgba(var(--color-on-surface-rgb), 0.04); --elevation-2: 0 1px 2px 0 rgba(var(--color-on-surface-rgb), 0.08), 0 2px 6px 2px rgba(var(--color-on-surface-rgb), 0.06); --elevation-3: 0 1px 3px 0 rgba(var(--color-on-surface-rgb), 0.08), 0 4px 8px 3px rgba(var(--color-on-surface-rgb), 0.08); --surface-sticky-opacity: 0.92; }