/* ============================================================ VÉRTICE · tema claro + escuro Controlado por ou "dark" Âmbar = ação/marca · Azul-aço = interação · #FE7000 = só logo ============================================================ */ /* ---------- Tokens que NÃO mudam entre temas ---------- */ :root { --v-logo-orange: #FE7000; /* exclusivo da logo — nunca na UI */ --v-radius: 10px; --v-radius-lg: 16px; } /* ---------- TEMA ESCURO (padrão da marca / fallback sem JS) ---------- */ :root, [data-theme="dark"] { --v-bg: #0C0D0F; --v-surface: #16181C; --v-surface-2: #1C1F24; --v-border: #262A31; --v-border-strong: #333A44; --v-text: #F2F4F7; --v-text-muted: #868D97; --v-text-subtle: #5A616B; --v-accent: #C05A1B; /* âmbar UI */ --v-accent-hover: #D66920; /* clareia no hover */ --v-accent-active: #A44C14; --v-accent-ink: #FFF7F0; --v-accent-soft: rgba(192, 90, 27, 0.14); --v-accent-border: rgba(192, 90, 27, 0.45); --v-steel: #5B7FA6; --v-link: #7FA3CA; --v-link-hover: #9DBBDD; --v-steel-soft: rgba(91, 127, 166, 0.12); --v-focus: #8FB0D6; --v-success: #4E9E6E; --v-danger: #C6534B; --v-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); } /* ---------- TEMA CLARO ---------- */ [data-theme="light"] { --v-bg: #F4F5F7; /* branco frio, não creme */ --v-surface: #FFFFFF; --v-surface-2: #ECEEF1; --v-border: #E0E3E9; --v-border-strong: #C9CED7; --v-text: #15181C; --v-text-muted: #565D67; --v-text-subtle: #878E98; --v-accent: #A94D15; /* âmbar mais profundo p/ ler no claro */ --v-accent-hover: #934211; /* escurece no hover */ --v-accent-active: #7C370D; --v-accent-ink: #FFF7F0; --v-accent-soft: rgba(169, 77, 21, 0.10); --v-accent-border: rgba(169, 77, 21, 0.35); --v-steel: #4A6E97; --v-link: #2F5C8A; /* azul fechado, sério */ --v-link-hover: #1F4770; --v-steel-soft: rgba(74, 110, 151, 0.10); --v-focus: #4A6E97; --v-success: #2E7D52; --v-danger: #B23B34; --v-shadow: 0 14px 34px rgba(20, 22, 28, 0.10); } /* ============================================================ EXEMPLOS DE USO — copie o que precisar ============================================================ */ body { background: var(--v-bg); color: var(--v-text); transition: background-color .2s ease, color .2s ease; } /* Botão de alternância de tema (cabeçalho) */ .theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; background: var(--v-surface); color: var(--v-text); border: 1px solid var(--v-border); border-radius: var(--v-radius); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .theme-toggle:hover { border-color: var(--v-steel); background: var(--v-steel-soft); } /* Botão primário — âmbar */ .btn-primary { background: var(--v-accent); color: var(--v-accent-ink); border: 1px solid transparent; border-radius: var(--v-radius); padding: 12px 22px; font-weight: 600; cursor: pointer; transition: background .15s ease; } .btn-primary:hover { background: var(--v-accent-hover); } .btn-primary:active { background: var(--v-accent-active); } /* Botão secundário — contorno neutro, aço no hover */ .btn-secondary { background: transparent; color: var(--v-text); border: 1px solid var(--v-border); border-radius: var(--v-radius); padding: 12px 22px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .btn-secondary:hover { border-color: var(--v-steel); background: var(--v-steel-soft); } /* Links — azul-aço, nunca âmbar */ a { color: var(--v-link); text-decoration: none; } a:hover { color: var(--v-link-hover); } /* Foco visível (acessibilidade) */ :focus-visible { outline: 2px solid var(--v-focus); outline-offset: 2px; border-radius: 4px; } /* Card */ .card { background: var(--v-surface); border: 1px solid var(--v-border); border-radius: var(--v-radius-lg); padding: 22px; box-shadow: var(--v-shadow); transition: border-color .15s ease; } .card:hover { border-color: var(--v-border-strong); } /* Eyebrow / rótulo de seção */ .eyebrow { color: var(--v-accent); font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; } /* Badge / tag */ .badge { background: var(--v-accent-soft); color: var(--v-accent); border: 1px solid var(--v-accent-border); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; } /* Campo de formulário */ .input { background: var(--v-surface); color: var(--v-text); border: 1px solid var(--v-border); border-radius: var(--v-radius); padding: 11px 14px; } .input::placeholder { color: var(--v-text-subtle); } .input:focus { border-color: var(--v-steel); outline: none; } /* Respeita quem pediu menos movimento */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }