/* ========================================================================== 4UTO Office — Design tokens (manual da marca v1.0, setembro 2026) Referência: docs/marca/manual-da-marca/BRAND.md Dois temas de marca × dois modos, no : data-brand="marinho" (padrão) | "grafite" data-theme="light" (padrão) | "dark" O servidor escreve os dois atributos (preferência do usuário, senão o padrão do escritório); sem data-brand vale Marinho. Regra de ouro: --color-accent NUNCA é cor de texto em fundo claro; para isso existe --color-accent-text. Os nomes antigos (--color-text-link, --color-card-hover, --color-sidebar-*…) continuam definidos: as telas existentes usam todos eles. ========================================================================== */ /* ── Comum aos dois temas (modo claro) ───────────────────────────────────── */ :root { /* Tipografia */ --font-title: 'Poppins', 'Google Sans', sans-serif; /* títulos e logo · 600 */ --font-body: 'Inter', 'Roboto', sans-serif; /* texto · 400/500 */ --font-mono: 'JetBrains Mono', monospace; /* números, códigos, "OFFICE" */ --font-size-xs: 0.6875rem; --font-size-sm: 0.75rem; --font-size-base: 0.875rem; --font-size-md: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* Estrutura */ --sidebar-width: 256px; --sidebar-collapsed-width: 72px; --topbar-height: 64px; --content-max-width: 1400px; --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 24px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(60,64,67,.08), 0 1px 3px rgba(60,64,67,.06); --shadow-md: 0 1px 3px rgba(60,64,67,.12), 0 4px 8px rgba(60,64,67,.08); --shadow-lg: 0 2px 6px rgba(60,64,67,.12), 0 8px 24px rgba(60,64,67,.08); --shadow-card: 0 1px 2px rgba(60,64,67,.08); --shadow-card-hover: 0 2px 6px rgba(60,64,67,.15), 0 4px 12px rgba(60,64,67,.08); --shadow-topbar: 0 1px 3px rgba(60,64,67,.2); --shadow-xl: 0 8px 24px rgba(60,64,67,.15); --shadow-sidebar: 1px 0 0 var(--color-sidebar-border); --transition-fast: 150ms cubic-bezier(0.2, 0, 0, 1); --transition-base: 250ms cubic-bezier(0.2, 0, 0, 1); --transition-slow: 350ms cubic-bezier(0.2, 0, 0, 1); --z-dropdown: 100; --z-sticky: 200; --z-sidebar: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; /* Semânticas — iguais nos dois temas (status sempre ícone + texto) */ --color-success: #34a853; --color-success-light: #5bb974; --color-success-dark: #1e8e3e; --color-success-text: #188038; /* em branco 5,02:1 */ --color-success-solid: #188038; --color-success-solid-hover: #146c2e; --color-success-surface: #e6f4ea; --color-secondary: #34a853; /* nome antigo do verde */ --color-secondary-light: #5bb974; --color-secondary-dark: #1e8e3e; --color-warning: #f9ab00; --color-warning-light: #fdd663; --color-warning-dark: #e37400; --color-warning-text: #b06000; /* em branco 4,65:1 */ --color-warning-solid: #b06000; --color-warning-surface: #fef7e0; --color-danger: #ea4335; --color-danger-text: #c5221f; /* em branco 5,80:1 */ --color-danger-solid: #c5221f; --color-danger-solid-hover: #a50e0e; --color-danger-surface: #fce8e6; --color-error: #ea4335; --color-error-dark: #c5221f; --color-purple: #9334e6; /* Neutros (Workspace) */ --color-bg: #f8f9fa; /* Névoa */ --color-bg-secondary: #f1f3f4; --color-card: #ffffff; --color-card-hover: #fafafa; --color-surface: #ffffff; --color-surface-2: #f1f3f4; --color-border: #dadce0; --color-border-light: #f1f3f4; --color-divider: #e8eaed; --color-text: #202124; /* Grafite */ --color-text-secondary: #5f6368; --color-text-muted: #5f6368; /* 6,0:1 em branco */ --color-text-inverse: #ffffff; color-scheme: light; } /* ── TEMA 1 · MARINHO + VERDE-LIMÃO (padrão) · claro ─────────────────────── */ :root, [data-brand="marinho"] { --color-primary: #0b1d3a; /* Marinho — marca, botões, links */ --color-primary-solid: #0b1d3a; --color-primary-solid-hover: #14294d; --color-primary-dark: #14294d; /* hover */ --color-primary-light: #23375c; --color-primary-surface: #e9f2ff; /* fundos suaves, selos */ --color-on-primary: #f2f5fa; /* Gelo — texto sobre Marinho */ --color-accent: #c6f135; /* Limão — acento; corte do logo */ --color-accent-hover: #d9f56a; --color-accent-text: #5b7a00; /* Limão escuro — texto em fundo claro (5,0:1) */ --color-accent-surface: #f3f8dc; --color-on-accent: #0b1d3a; --color-focus-ring: #0b1d3a; --color-info: #0b1d3a; --color-text-link: #0b1d3a; /* Menu lateral: sempre Marinho, nos dois modos */ --color-sidebar-bg: #0b1d3a; --color-sidebar-text: #a9b4c6; --color-sidebar-muted: #7d8aa3; --color-sidebar-section: #7d8aa3; --color-sidebar-icon: #a9b4c6; --color-sidebar-active-bg: #14294d; --color-sidebar-active: #f2f5fa; --color-sidebar-hover: #14294d; --color-sidebar-border: #23375c; /* Bootstrap 5.3 segue a marca */ --bs-primary: #0b1d3a; --bs-primary-rgb: 11, 29, 58; --bs-primary-text-emphasis: #0b1d3a; --bs-primary-bg-subtle: #e9f2ff; --bs-primary-border-subtle: #b8c4d8; --bs-link-color: #0b1d3a; --bs-link-color-rgb: 11, 29, 58; --bs-link-hover-color: #14294d; --bs-link-hover-color-rgb: 20, 41, 77; --bs-focus-ring-color: rgba(11, 29, 58, .25); } /* ── Marinho · escuro ────────────────────────────────────────────────────── */ [data-brand="marinho"][data-theme="dark"], :root[data-theme="dark"]:not([data-brand]) { --color-primary: #c6f135; /* Limão vira a ação */ --color-primary-solid: #c6f135; --color-primary-solid-hover: #d9f56a; --color-primary-dark: #d9f56a; --color-primary-light: #d9f56a; --color-primary-surface: rgba(198, 241, 53, .16); --color-on-primary: #0b1d3a; --color-accent-text: #c6f135; --color-accent-surface: rgba(198, 241, 53, .16); --color-focus-ring: #c6f135; --color-info: #c6f135; --color-text-link: #c6f135; --color-bg: #081426; --color-bg-secondary: #14294d; --color-card: #0f2244; --color-card-hover: #14294d; --color-surface: #0f2244; --color-surface-2: #14294d; --color-border: #23375c; --color-border-light: #14294d; --color-divider: #23375c; --color-text: #e8eaed; --color-text-secondary: #c3cbd8; --color-text-muted: #a9b4c6; --bs-primary: #c6f135; --bs-primary-rgb: 198, 241, 53; --bs-primary-text-emphasis: #c6f135; --bs-primary-bg-subtle: rgba(198, 241, 53, .16); --bs-primary-border-subtle: rgba(198, 241, 53, .35); --bs-link-color: #c6f135; --bs-link-color-rgb: 198, 241, 53; --bs-link-hover-color: #d9f56a; --bs-link-hover-color-rgb: 217, 245, 106; --bs-focus-ring-color: rgba(198, 241, 53, .35); } /* ── TEMA 2 · GRAFITE + LARANJA (opcional) · claro ───────────────────────── */ [data-brand="grafite"] { --color-primary: #141414; /* Grafite — marca, botões, links */ --color-primary-solid: #141414; --color-primary-solid-hover: #2a2a2a; --color-primary-dark: #2a2a2a; --color-primary-light: #3a3a3a; --color-primary-surface: #efefec; --color-on-primary: #eceae4; /* Areia — texto sobre Grafite */ --color-accent: #e4572e; /* Laranja — acento; corte do logo */ --color-accent-hover: #f06a42; --color-accent-text: #b8401c; /* Laranja escuro — texto em fundo claro (5,6:1) */ --color-accent-surface: #fbe9e2; --color-on-accent: #141414; --color-focus-ring: #141414; --color-info: #141414; --color-text-link: #141414; --color-bg: #f6f5f2; --color-bg-secondary: #eeede9; --color-card: #ffffff; --color-card-hover: #fafaf8; --color-surface: #ffffff; --color-surface-2: #eeede9; --color-border: #dcdad4; --color-border-light: #eeede9; --color-divider: #e8e6e0; /* Menu lateral: sempre Grafite, nos dois modos */ --color-sidebar-bg: #141414; --color-sidebar-text: #a8a8a8; --color-sidebar-muted: #7a7a7a; --color-sidebar-section: #7a7a7a; --color-sidebar-icon: #a8a8a8; --color-sidebar-active-bg: #262626; --color-sidebar-active: #eceae4; --color-sidebar-hover: #262626; --color-sidebar-border: #2e2e2e; --bs-primary: #141414; --bs-primary-rgb: 20, 20, 20; --bs-primary-text-emphasis: #141414; --bs-primary-bg-subtle: #efefec; --bs-primary-border-subtle: #cfcdc6; --bs-link-color: #141414; --bs-link-color-rgb: 20, 20, 20; --bs-link-hover-color: #2a2a2a; --bs-link-hover-color-rgb: 42, 42, 42; --bs-focus-ring-color: rgba(20, 20, 20, .25); } /* ── Grafite · escuro ────────────────────────────────────────────────────── */ [data-brand="grafite"][data-theme="dark"] { --color-primary: #ff7a50; --color-primary-solid: #ff7a50; --color-primary-solid-hover: #ff9370; --color-primary-dark: #ff9370; --color-primary-light: #ff9370; --color-primary-surface: rgba(255, 122, 80, .16); --color-on-primary: #141414; --color-accent: #ff7a50; --color-accent-hover: #ff9370; --color-accent-text: #ff7a50; --color-accent-surface: rgba(255, 122, 80, .16); --color-focus-ring: #ff7a50; --color-info: #ff7a50; --color-text-link: #ff7a50; --color-bg: #0f0f0f; --color-bg-secondary: #262626; --color-card: #1c1c1c; --color-card-hover: #262626; --color-surface: #1c1c1c; --color-surface-2: #262626; --color-border: #2e2e2e; --color-border-light: #262626; --color-divider: #2e2e2e; --color-text: #e8eaed; --color-text-secondary: #c4c4c4; --color-text-muted: #a8a8a8; --bs-primary: #ff7a50; --bs-primary-rgb: 255, 122, 80; --bs-primary-text-emphasis: #ff7a50; --bs-primary-bg-subtle: rgba(255, 122, 80, .16); --bs-primary-border-subtle: rgba(255, 122, 80, .35); --bs-link-color: #ff7a50; --bs-link-color-rgb: 255, 122, 80; --bs-link-hover-color: #ff9370; --bs-link-hover-color-rgb: 255, 147, 112; --bs-focus-ring-color: rgba(255, 122, 80, .35); } /* ── TEMA 3 · CLÁSSICO (a paleta anterior, azul Google Workspace) · claro ── */ /* Os blocos "na cor da marca" (topo da landing, painel do login, barra do portal) ficam azuis; o menu lateral volta a ser branco, como era antes. */ [data-brand="classico"] { --color-primary: #1967d2; /* azul texto/ícone — 5,37:1 em branco */ --color-primary-solid: #1a73e8; /* fundo de botão */ --color-primary-solid-hover: #1557b0; --color-primary-dark: #1557b0; --color-primary-light: #4285f4; --color-primary-surface: #e8f0fe; --color-on-primary: #ffffff; --color-accent: #fbbc04; /* amarelo Google — acento dos blocos azuis */ --color-accent-hover: #fdd663; --color-accent-text: #1967d2; --color-accent-surface: #fef7e0; --color-on-accent: #202124; --color-focus-ring: #1a73e8; --color-info: #1967d2; --color-text-link: #1967d2; --color-sidebar-bg: #1557b0; --color-sidebar-text: #d2e3fc; --color-sidebar-muted: #aecbfa; --color-sidebar-section: #aecbfa; --color-sidebar-icon: #d2e3fc; --color-sidebar-active-bg: #1967d2; --color-sidebar-active: #ffffff; --color-sidebar-hover: #1967d2; --color-sidebar-border: #4285f4; --bs-primary: #1a73e8; --bs-primary-rgb: 26, 115, 232; --bs-primary-text-emphasis: #1967d2; --bs-primary-bg-subtle: #e8f0fe; --bs-primary-border-subtle: #aecbfa; --bs-link-color: #1967d2; --bs-link-color-rgb: 25, 103, 210; --bs-link-hover-color: #1557b0; --bs-link-hover-color-rgb: 21, 87, 176; --bs-focus-ring-color: rgba(26, 115, 232, .25); } [data-brand="classico"] .sidebar { --color-sidebar-bg: #ffffff; --color-sidebar-text: #444746; --color-sidebar-muted: #5f6368; --color-sidebar-section: #5f6368; --color-sidebar-icon: #444746; --color-sidebar-active-bg: #d3e3fd; --color-sidebar-active: #0b57d0; --color-sidebar-hover: #f1f3f4; --color-sidebar-border: #dadce0; --color-accent: #1a73e8; } /* ── Clássico · escuro ───────────────────────────────────────────────────── */ [data-brand="classico"][data-theme="dark"] { --color-primary: #8ab4f8; /* 6,61:1 em #2c2c2e */ --color-primary-solid: #1a73e8; --color-primary-solid-hover: #1557b0; --color-primary-dark: #aecbfa; --color-primary-light: #aecbfa; --color-primary-surface: rgba(26, 115, 232, .22); --color-on-primary: #ffffff; --color-accent-text: #8ab4f8; --color-accent-surface: rgba(249, 171, 0, .22); --color-focus-ring: #8ab4f8; --color-info: #8ab4f8; --color-text-link: #8ab4f8; --color-bg: #1c1c1e; --color-bg-secondary: #2c2c2e; --color-card: #2c2c2e; --color-card-hover: #3a3a3c; --color-surface: #2c2c2e; --color-surface-2: #3a3a3c; --color-border: #3a3a3c; --color-border-light: #2c2c2e; --color-divider: #3a3a3c; --color-text: #e8eaed; --color-text-secondary: #bdc1c6; --color-text-muted: #9aa0a6; --color-sidebar-bg: #1a3a6e; --color-sidebar-text: #c6dafc; --color-sidebar-muted: #8ab4f8; --color-sidebar-section: #8ab4f8; --color-sidebar-icon: #c6dafc; --color-sidebar-active-bg: #1f4a8a; --color-sidebar-active: #ffffff; --color-sidebar-hover: #1f4a8a; --color-sidebar-border: #2d5aa0; --bs-primary: #8ab4f8; --bs-primary-rgb: 138, 180, 248; --bs-primary-text-emphasis: #8ab4f8; --bs-primary-bg-subtle: rgba(26, 115, 232, .22); --bs-primary-border-subtle: rgba(138, 180, 248, .35); --bs-link-color: #8ab4f8; --bs-link-color-rgb: 138, 180, 248; --bs-link-hover-color: #aecbfa; --bs-link-hover-color-rgb: 174, 203, 250; --bs-focus-ring-color: rgba(138, 180, 248, .35); } [data-brand="classico"][data-theme="dark"] .sidebar { --color-sidebar-bg: #202124; --color-sidebar-text: #e8eaed; --color-sidebar-muted: #bdc1c6; --color-sidebar-section: #bdc1c6; --color-sidebar-icon: #bdc1c6; --color-sidebar-active-bg: #1a3a6e; --color-sidebar-active: #8ab4f8; --color-sidebar-hover: #2c2c2e; --color-sidebar-border: #3a3a3c; --color-accent: #8ab4f8; } /* ── Modo escuro: o que vale para todas as marcas ────────────────────────── */ [data-theme="dark"] { --color-success: #81c995; /* 7,12:1 */ --color-success-dark: #81c995; --color-success-text: #81c995; --color-success-surface: rgba(52, 168, 83, .22); --color-secondary: #81c995; --color-secondary-dark: #a8dab5; --color-warning-text: #fdd663; --color-warning-surface: rgba(249, 171, 0, .22); --color-danger: #f28b82; /* 5,83:1 */ --color-danger-text: #f28b82; --color-danger-surface: rgba(234, 67, 53, .22); --color-error: #f28b82; --color-error-dark: #f28b82; --color-purple: #c58af9; --shadow-card: 0 1px 2px rgba(0,0,0,.3); --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --shadow-topbar: 0 1px 3px rgba(0,0,0,.4); /* Bootstrap 5.3 — segue os tokens (data-bs-theme="dark" vem junto) */ --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-text); --bs-emphasis-color: var(--color-text); --bs-secondary-color: var(--color-text-secondary); --bs-secondary-bg: var(--color-bg-secondary); --bs-tertiary-bg: var(--color-bg-secondary); --bs-border-color: var(--color-border); color-scheme: dark; } /* ── Logo — componente HTML, sem imagem (herda o tema) ───────────────────── */ /* Negativa (fundo na cor da marca, como o menu lateral) é o padrão; .claro é a versão sobre fundo claro. */ .wordmark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; } .wordmark:hover { color: inherit; } .wordmark-4uto { display: flex; line-height: .9; font-family: var(--font-title); font-weight: 600; font-size: 24px; letter-spacing: -.04em; color: var(--color-on-primary); } .wordmark-4uto .quatro { position: relative; display: inline-block; } .wordmark-4uto .quatro::after { content: ""; position: absolute; left: 8%; top: 62%; width: 52%; height: .08em; background: var(--color-accent); } .wordmark-office { font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--color-accent); } .wordmark.claro .wordmark-4uto { color: var(--color-primary); } .wordmark.claro .wordmark-office { color: var(--color-text-secondary); } .wordmark.grande .wordmark-4uto { font-size: 56px; } .wordmark.grande .wordmark-office { font-size: 13px; letter-spacing: .5em; } .wordmark.vertical { flex-direction: column; align-items: flex-start; gap: 4px; } /* No menu lateral o fundo é sempre a cor da marca: 4UTO em Gelo/Areia, acento no corte e no OFFICE. */ .sidebar .wordmark-4uto { color: var(--color-sidebar-active); } /* Monograma "4" — ícone de app, avatar */ .monograma { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 11px; background: var(--color-sidebar-bg); font-family: var(--font-title); font-weight: 600; font-size: 32px; line-height: 1; color: var(--color-sidebar-active); } .monograma .quatro { position: relative; display: inline-block; } .monograma .quatro::after { content: ""; position: absolute; left: 8%; top: 62%; width: 52%; height: .09em; background: var(--color-accent); } /* Caixa de seleção marcada no escuro: fundo Limão/Laranja pede o "check" na cor da marca, não branco */ [data-brand="marinho"][data-theme="dark"] .form-check-input:checked[type="checkbox"], :root[data-theme="dark"]:not([data-brand]) .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b1d3a' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } [data-brand="grafite"][data-theme="dark"] .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23141414' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } /* Amostras fixas das duas marcas (seletor de aparência): mostram a marca, não o tema atual */ .aparencia-amostra { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; } .aparencia-amostra.marinho { background: #0b1d3a; box-shadow: inset 0 0 0 3px #c6f135; } .aparencia-amostra.grafite { background: #141414; box-shadow: inset 0 0 0 3px #e4572e; } .aparencia-amostra.classico { background: #1a73e8; box-shadow: inset 0 0 0 3px #e8f0fe; }