/* * Tokens de identidade visual — portados literalmente de IDENTIDADE-VISUAL.md * (bloco :root/.dark, secao 2.5), + --color-nav-bg promovido a token * (corrigindo a inconsistencia §13.6 do documento de origem: o fundo do * Topnav nao deve ser hex hardcoded). */ :root { --font-geist-sans: 'Geist', system-ui, sans-serif; --font-geist-mono: 'Geist Mono', monospace; --color-canvas: #f7f8fb; --color-surface: #ffffff; --color-panel: #f0f2f7; --color-border: #e2e5ed; --color-muted: #9ca3af; --color-subtle: #6b7280; --color-body: #374151; --color-heading: #0f1117; --color-brand-rgb: 69 183 209; --color-brand: #45B7D1; --color-brand-hover: #2E9BB8; --color-brand-muted: #e8f7fb; /* Destaque: aditivo (SPEC_Tema §4.3) — na paleta Clássica é igual à primária, sem mudança visual. */ --color-accent-rgb: var(--color-brand-rgb); --color-accent: var(--color-brand); --color-success: #16a34a; --color-warning: #d97706; --color-error: #dc2626; --color-nav-bg: #1D3557; --shadow-soft-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.06); --shadow-soft: 0 1px 4px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.05); --shadow-soft-lg: 0 4px 12px -2px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.06); --shadow-soft-xl: 0 8px 28px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.07); --shadow-brand: 0 0 0 3px rgba(var(--color-accent-rgb), 0.20); --radius-sm: 4px; --radius-md: 7px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-full: 9999px; --content-width: 75%; } .dark { --color-canvas: #0d1117; --color-surface: #13161f; --color-panel: #1c2030; --color-border: #272d3f; --color-muted: #4b5368; --color-subtle: #6b7390; --color-body: #9aa5b8; --color-heading: #eef0f6; --color-brand-rgb: 69 183 209; --color-brand: #45B7D1; --color-brand-hover: #5AC8E0; --color-brand-muted: #0d2233; --color-accent-rgb: var(--color-brand-rgb); --color-accent: var(--color-brand); --color-success: #22c55e; --color-warning: #f59e0b; --color-error: #ef4444; --color-nav-bg: #1D3557; --shadow-soft-sm: 0 1px 3px 0 rgba(8, 12, 28, 0.55); --shadow-soft: 0 2px 8px 0 rgba(8, 12, 28, 0.55), 0 1px 2px 0 rgba(8, 12, 28, 0.40); --shadow-soft-lg: 0 4px 20px 0 rgba(8, 12, 28, 0.60), 0 2px 6px 0 rgba(8, 12, 28, 0.45); --shadow-soft-xl: 0 8px 36px 0 rgba(8, 12, 28, 0.65), 0 4px 10px 0 rgba(8, 12, 28, 0.50); --shadow-brand: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18); } /* ========================================================== Paleta "Navy & Terracota" (SPEC_Tema §4.3) — ativada via [data-palette="navy_terracota"] no , combinada com a classe .dark já existente. --color-success/warning/error não são sobrescritos aqui de propósito: cores de status ficam fixas em qualquer paleta (SPEC_Tema decisão 6). ========================================================== */ [data-palette="navy_terracota"] { --color-canvas: #F3EFE8; --color-surface: #FBF9F5; --color-panel: #E8E2D6; --color-border: #E8E2D6; --color-muted: #8C8577; --color-subtle: #4A463E; --color-body: #182E3C; --color-heading: #11212B; --color-brand-rgb: 31 59 77; --color-brand: #1F3B4D; --color-brand-hover: #182E3C; --color-brand-muted: #EEF3F6; --color-accent-rgb: 184 80 31; --color-accent: #B8501F; --color-nav-bg: #182E3C; } [data-palette="navy_terracota"].dark { --color-canvas: #0B151C; --color-surface: #11212B; --color-panel: #182E3C; --color-border: #182E3C; --color-muted: #4F7690; --color-subtle: #AFC4D1; --color-body: #F3EFE8; --color-heading: #FBF9F5; --color-brand-rgb: 127 158 177; --color-brand: #7F9EB1; --color-brand-hover: #AFC4D1; --color-brand-muted: #11212B; --color-accent-rgb: 222 118 68; --color-accent: #DE7644; --color-nav-bg: #182E3C; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-geist-sans); font-size: 14px; line-height: 20px; color: var(--color-body); background: var(--color-canvas); } h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: var(--color-heading); margin: 0; } .text-xs { font-size: 11px; line-height: 16px; } .text-sm { font-size: 13px; line-height: 20px; } .text-lg { font-size: 16px; line-height: 24px; } .text-xl { font-size: 18px; line-height: 28px; } .text-2xl { font-size: 22px; line-height: 32px; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }