/* ═══════════════════════════════════════════════════════════════════════════ DUOMOBI · THEME.CSS — fonte ÚNICA de cor do sistema ─────────────────────────────────────────────────────────────────────────── :root → tema ESCURO (valores idênticos aos de hoje) :root[data-theme="light"] → tema CLARO · variante "Cinza Técnico" Carimba-se `data-theme` no ; nenhum componente conhece cor literal. Emitido por partials/themeToggle.php → archc_theme_head(). ─── REGRA DE OURO ──────────────────────────────────────────────────────── Todo valor do bloco :root é BYTE-IDÊNTICO ao que a página já usava. Ativar este arquivo não muda um pixel no escuro; só cria o lado claro. Quando surgir cor nova, ela nasce AQUI, com par claro/escuro — nunca no componente. ─── TRÊS VOCABULÁRIOS, UM CONJUNTO ─────────────────────────────────────── O sistema cresceu com três nomes para a mesma cor: --bg-0/--fg-1/--line… hubs (appShell.php, projects, directory, rail) --bg-base/--text-primary… editor 3D (index.php) --duomobi-* marca (landing, apresentação) Aqui os três são declarados juntos e apontam para o mesmo valor. Unificar os NOMES é campanha própria; unificar a FONTE é o que destrava o tema. ═══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: dark; /* ─── Superfícies ──────────────────────────────────────────────────── */ --bg-0: #07090a; --bg-base: #07090a; --bg-panel: #12181a; --bg-card: #12181a; --bg-card-hover: #161d20; --bg-card-alt: #161d20; --bg-elev: #1a2226; --bg-surface: #1a2226; --bg-raised: #1a2226; --bg-modal: #1a2226; --bg-modal-card: #161d20; --bg-input: #0d1213; /* ─── Linhas ───────────────────────────────────────────────────────── */ --line: #1e2629; --line-strong: #2a3438; --border-subtle: #1e2629; --border-default: #1e2629; --border-strong: #2a3438; /* ─── Texto ────────────────────────────────────────────────────────── */ --fg-1: #e8eeec; --fg-2: #9aa6a3; --fg-3: #6b7775; --fg-4: #4a5553; --text-primary: #e8eeec; --text-secondary: #c1cac7; --text-muted: #9aa6a3; --text-faint: #6b7775; /* ─── Accent (verde da marca) ──────────────────────────────────────── */ --accent: #22c55e; --accent-hover: #4ade80; --accent-text: #86efac; --accent-text-hi: #a7f3d0; /* mesmo papel, estado :hover — 1 passo mais claro */ --accent-fg: #6ee7a3; --accent-dim: rgba(34,197,94,0.14); --accent-soft: rgba(34,197,94,0.10); --accent-line: rgba(34,197,94,0.22); --accent-glow: rgba(34,197,94,0.30); /* Véu de fundo (radial no body). No claro cai quase a zero: sobre cinza claro o mesmo verde a 5% vira mancha esverdeada, não profundidade. */ --accent-wash: rgba(34,197,94,0.05); --accent-wash-2: rgba(34,197,94,0.025); /* Texto/ícone SOBRE o accent sólido. No escuro o verde é claro → tinta escura; no claro o verde é escuro → tinta branca. Sem este token o botão primário fica ilegível em um dos dois lados. */ --accent-on: #04140a; /* Tinta sobre preenchimento SATURADO (badge vermelho, pílula de contagem). Branco nos DOIS temas, de propósito: o vermelho não clareia na virada, e inverter esse branco deixaria texto escuro sobre fundo escuro. Existe para que a varredura automática tenha onde pousar um #fff que deve ficar #fff. */ --on-solid: #ffffff; /* ─── Status ───────────────────────────────────────────────────────── */ --success: #22c55e; --success-dim: rgba(34,197,94,0.12); --danger: #f87171; --danger-hover: #f06464; --danger-dim: rgba(248,113,113,0.14); --danger-text: #fca5a5; --danger-text-hi: #fecaca; /* idem, no vermelho */ /* projects.php e libraries.php usavam #fbbf24 (amber-400) para o mesmo papel. Unificado no #f59e0b da marca (--duomobi-warn); as duas páginas escurecem um passo no âmbar. Foi a única cor que teve de ceder na consolidação. */ --warn: #f59e0b; --warn-dim: rgba(245,158,11,0.15); --warn-soft: rgba(251,191,36,0.10); --warn-line: rgba(251,191,36,0.22); --warn-text: #fcd34d; --warn-fg: #fcd34d; --danger-soft: rgba(248,113,113,0.10); --danger-line: rgba(248,113,113,0.22); --info: #60a5fa; --info-hover: #6090ff; --info-dim: rgba(96,165,250,0.14); --info-soft: rgba(96,165,250,0.10); --info-line: rgba(96,165,250,0.22); --info-text: #93c5fd; /* ─── Vermelho e azul do EDITOR ──────────────────────────────────────── O editor 3D usa outro vermelho (#e05252) e outro azul (#4a7fff) para os mesmos papéis dos hubs (#f87171 / #60a5fa). É deriva, não desenho — mas colapsar os dois muda a tela de alguém sem pedido. Ficam nomeados com -alt: preserva o escuro do editor, ganha lado claro, e deixa a deriva VISÍVEL para quem um dia decidir unificar. */ --danger-alt: #e05252; --danger-alt-dim: rgba(224,82,82,0.12); --info-alt: #4a7fff; --info-alt-dim: rgba(74,127,255,0.14); --info-alt-text: #7eb0ff; --mut-dim: rgba(255,255,255,0.06); /* ─── Paleta de IDENTIDADE ───────────────────────────────────────────── Cor por hash, não por semântica: workspace, papel de membro, avatar. Não quer dizer "erro" nem "ok" — só distingue um do outro. Por isso é lista própria, e não reaproveita --danger/--warn. */ --indigo-fg: #818cf8; --orange-fg: #fb923c; /* status "stand by": laranja é o único matiz que --warn não cobre sem virar "erro" */ --hue-sky: #7dd3fc; --hue-violet: #c4b5fd; --hue-amber: #fde68a; --hue-rose: #fda4af; /* ─── Overlays ───────────────────────────────────────────────────────── Os que mais quebram na virada: no escuro "elevar" é clarear (branco a %), no claro é escurecer (preto a %). Quem escreve rgba(255,255,255,.04) no componente perde o hover inteiro no claro — some sobre fundo branco. */ --surface-hover: rgba(255,255,255,0.04); --surface-hover-subtle: rgba(255,255,255,0.03); --surface-active: rgba(255,255,255,0.07); --surface-faint: rgba(255,255,255,0.01); /* ESCALA DE VÉU — a peça que converte overlay em algo temável. Havia 15 alfas distintos de rgba(255,255,255,…) espalhados pelas páginas, todos querendo dizer a mesma coisa: "um pouco mais claro que o fundo". No claro isso se inverte para "um pouco mais escuro". São 4 degraus por PAPEL, não por número — bloco, chip, borda, borda forte. */ --veil-soft: rgba(255,255,255,0.025); /* fundo de bloco discreto */ --veil-tint: rgba(255,255,255,0.05); /* chip, zebra, realce leve */ --veil-edge: rgba(255,255,255,0.15); /* separador, borda comum */ --veil-edge-strong:rgba(255,255,255,0.25); /* borda de controle */ /* Cor das sombras (a GEOMETRIA fica no componente). No escuro é preto puro; no claro, azul-ardósia bem diluído — preto a 45% sobre branco vira sujeira. */ --shadow-color: rgba(0,0,0,0.45); --shadow-color-strong: rgba(0,0,0,0.60); --surface-elevated: 0 2px 8px rgba(0,0,0,0.24), 0 0 0 1px rgba(255,255,255,0.04); --overlay-scrim: rgba(0,0,0,0.62); /* ─── Sombras ──────────────────────────────────────────────────────── */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.30); --shadow-md: 0 6px 20px rgba(0,0,0,0.50); --shadow-lg: 0 18px 56px rgba(0,0,0,0.70); --shadow-pop: 0 16px 48px rgba(0,0,0,0.55); --shadow-tip: 0 4px 16px rgba(0,0,0,0.45); /* ─── Controles de formulário ──────────────────────────────────────── */ --control-line: rgba(255,255,255,0.35); /* borda de checkbox/radio */ --control-line-hover: rgba(255,255,255,0.55); --control-ink: #0b0b0b; /* o ✓ sobre o accent */ --icon-stroke: #ffffff; /* traço padrão de */ --focus-ring: rgba(34,197,94,0.5); /* O ✓ do checkbox é ) e nada muda. No dia em que aquele bloco sair, a animação do editor troca de curva em silêncio. Conciliar os dois valores é parte daquela onda. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --d-xs: 120ms; --d-sm: 180ms; --d-md: 280ms; --d-lg: 480ms; --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 350ms; } /* ═══════════════════════════════════════════════════════════════════════════ CLARO · "Cinza Técnico" ─────────────────────────────────────────────────────────────────────────── Canvas cinza-médio + cards brancos, na linguagem de CAD (SketchUp/Promob): o card salta do fundo por CONTRASTE, não por brilho, e o viewport 3D não vira lanterna. Escolhido em 2026-08-04 entre 3 variantes (theme-lab.html). ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { color-scheme: light; --bg-0: #e4e8ea; --bg-base: #e4e8ea; --bg-panel: #f3f6f7; --bg-card: #ffffff; --bg-card-hover: #f2f5f6; --bg-card-alt: #edf1f2; --bg-elev: #ffffff; --bg-surface: #ffffff; --bg-raised: #ffffff; --bg-modal: #ffffff; --bg-modal-card: #f7fafb; --bg-input: #ffffff; --line: #d0d8dc; --line-strong: #adb8bf; --border-subtle: #dde3e6; --border-default: #d0d8dc; --border-strong: #adb8bf; --fg-1: #101619; --fg-2: #37454c; /* Medido no browser, na casca real: #61707a dava 4,15:1 sobre o canvas #e4e8ea — abaixo do AA para texto normal (o sub do cabeçalho usa este token). #5a6771 leva a 4,71:1 e continua lendo como secundário. */ --fg-3: #5a6771; /* Medido em produção, na Fidelidade: #8b98a1 dava 2,70:1 sobre o card e no CANVAS (#e4e8ea), que é mais escuro que o card. Calibrar contra o branco engana: #8b98a1 dava 2,70 no card e #7d8a94 ainda dava 2,87 no canvas. #75818b passa nos três fundos — 3,23 canvas · 3,64 card · 3,99 branco. A régua é o PIOR fundo em que o token pousa, não o melhor. */ --fg-4: #75818b; --text-primary: #101619; --text-secondary: #2a373e; --text-muted: #5a6771; --text-faint: #75818b; /* #22c55e sobre branco dá 2,3:1 — reprova até como componente (mín. 3:1). #15803d dá 5,0:1 e serve de texto. O verde da MARCA não muda; muda o verde de INTERFACE, que é outro papel. */ --accent: #15803d; --accent-hover: #166534; /* Um tom mais fundo que --accent: estes dois são TEXTO, e quase sempre sobre --accent-dim (verde a 10% no branco), não sobre o branco puro. Com #15803d o badge "Fechada" mede 4,39:1 — passa raspando por baixo do AA. #166534 leva a 6,2:1. Medido, não estimado. */ --accent-text: #166534; --accent-text-hi: #065f46; --accent-fg: #166534; --accent-dim: rgba(21,128,61,0.10); --accent-soft: rgba(21,128,61,0.08); --accent-line: rgba(21,128,61,0.24); --accent-glow: rgba(21,128,61,0.18); --accent-wash: rgba(21,128,61,0.020); --accent-wash-2: rgba(21,128,61,0.012); --accent-on: #ffffff; --on-solid: #ffffff; --success: #15803d; --success-dim: rgba(21,128,61,0.10); --danger: #dc2626; --danger-hover: #b91c1c; --danger-dim: rgba(220,38,38,0.09); --danger-text: #b91c1c; --danger-text-hi: #991b1b; --warn: #b45309; --warn-dim: rgba(180,83,9,0.10); --warn-soft: rgba(180,83,9,0.08); --warn-line: rgba(180,83,9,0.24); --warn-text: #92400e; --warn-fg: #92400e; --danger-soft: rgba(220,38,38,0.07); --danger-line: rgba(220,38,38,0.24); --info: #2563eb; --info-hover: #1d4ed8; --info-dim: rgba(37,99,235,0.09); --info-soft: rgba(37,99,235,0.07); --info-line: rgba(37,99,235,0.22); --info-text: #1d4ed8; --danger-alt: #b91c1c; --danger-alt-dim: rgba(185,28,28,0.09); --info-alt: #1d4ed8; --info-alt-dim: rgba(29,78,216,0.09); --info-alt-text: #1e40af; --mut-dim: rgba(16,22,25,0.075); /* Os mesmos 4 matizes, invertidos: no escuro são pastéis sobre fundo fundo; no claro precisam do tom 700 para sobreviver ao branco. */ --indigo-fg: #4338ca; --orange-fg: #c2410c; --hue-sky: #0369a1; --hue-violet: #6d28d9; --hue-amber: #a16207; --hue-rose: #be123c; --surface-hover: rgba(16,22,25,0.055); --surface-hover-subtle: rgba(16,22,25,0.042); --surface-active: rgba(16,22,25,0.09); --surface-faint: rgba(0,0,0,0.015); --veil-soft: rgba(16,22,25,0.022); --veil-tint: rgba(16,22,25,0.045); --veil-edge: rgba(16,22,25,0.13); --veil-edge-strong:rgba(16,22,25,0.22); --shadow-color: rgba(16,24,40,0.13); --shadow-color-strong: rgba(16,24,40,0.20); --surface-elevated: 0 1px 2px rgba(16,24,40,0.07), 0 0 0 1px rgba(16,24,40,0.06); --overlay-scrim: rgba(24,28,26,0.34); --shadow-sm: 0 1px 2px rgba(16,24,40,0.07), 0 1px 3px rgba(16,24,40,0.05); --shadow-md: 0 4px 10px -2px rgba(16,24,40,0.09), 0 10px 24px -8px rgba(16,24,40,0.12); --shadow-lg: 0 12px 28px -6px rgba(16,24,40,0.14), 0 30px 60px -20px rgba(16,24,40,0.20); --shadow-pop: 0 10px 30px -8px rgba(16,24,40,0.18), 0 2px 6px rgba(16,24,40,0.07); --shadow-tip: 0 4px 14px -4px rgba(16,24,40,0.18); --control-line: rgba(16,22,25,0.30); --control-line-hover: rgba(16,22,25,0.50); --control-ink: #ffffff; --icon-stroke: #101619; --focus-ring: rgba(21,128,61,0.45); --check-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E"); --scrollbar-thumb: rgba(16,22,25,0.16); --scrollbar-thumb-hover: rgba(21,128,61,0.50); --scrollbar-thumb-active: rgba(21,128,61,0.70); --viewport-bg: #dfe4e7; --viewport-fog: #e9edef; --viewport-grid: rgba(16,22,25,0.10); --viewport-axis: rgba(21,128,61,0.32); /* ═══ ESCALAS MECÂNICAS · lado claro ═══ Derivadas por REGRA, não a olho: véu branco→tinta ardósia a 85% do alfa; sombra preta→ardósia a 30% (preto a 45% sobre branco é sujeira); matiz mantém o matiz, com o verde indo ao tom que sobrevive ao branco. */ /* véu neutro */ --veil-02: rgba(16,22,25,0.021); --veil-03: rgba(16,22,25,0.034); --veil-04: rgba(16,22,25,0.055); --veil-05: rgba(16,22,25,0.07); --veil-06: rgba(16,22,25,0.083); --veil-08: rgba(16,22,25,0.11); --veil-10: rgba(16,22,25,0.138); --veil-12: rgba(16,22,25,0.165); --veil-15: rgba(16,22,25,0.207); --veil-18: rgba(16,22,25,0.248); --veil-25: rgba(16,22,25,0.312); --veil-35: rgba(16,22,25,0.397); --veil-55: rgba(16,22,25,0.568); /* tinta */ --ink-20: rgba(16,24,40,0.06); --ink-25: rgba(16,24,40,0.075); --ink-30: rgba(16,24,40,0.09); --ink-40: rgba(16,24,40,0.12); --ink-50: rgba(16,24,40,0.15); /* accent */ --accent-a04: rgba(21,128,61,0.04); --accent-a06: rgba(21,128,61,0.06); --accent-a08: rgba(21,128,61,0.08); --accent-a10: rgba(21,128,61,0.1); --accent-a12: rgba(21,128,61,0.12); --accent-a13: rgba(21,128,61,0.13); --accent-a15: rgba(21,128,61,0.15); --accent-a18: rgba(21,128,61,0.18); --accent-a20: rgba(21,128,61,0.2); --accent-a22: rgba(21,128,61,0.22); --accent-a25: rgba(21,128,61,0.25); --accent-a30: rgba(21,128,61,0.3); --accent-a35: rgba(21,128,61,0.35); --accent-a40: rgba(21,128,61,0.4); --accent-a50: rgba(21,128,61,0.5); /* danger */ --danger-a04: rgba(220,38,38,0.034); --danger-a06: rgba(220,38,38,0.051); --danger-a08: rgba(220,38,38,0.068); --danger-a10: rgba(220,38,38,0.085); --danger-a12: rgba(220,38,38,0.102); --danger-a13: rgba(220,38,38,0.111); --danger-a15: rgba(220,38,38,0.128); --danger-a18: rgba(220,38,38,0.153); --danger-a20: rgba(220,38,38,0.17); --danger-a22: rgba(220,38,38,0.187); --danger-a25: rgba(220,38,38,0.212); --danger-a30: rgba(220,38,38,0.255); --danger-a35: rgba(220,38,38,0.297); --danger-a40: rgba(220,38,38,0.34); --danger-a50: rgba(220,38,38,0.425); /* warn */ --warn-a04: rgba(180,83,9,0.034); --warn-a06: rgba(180,83,9,0.051); --warn-a08: rgba(180,83,9,0.068); --warn-a10: rgba(180,83,9,0.085); --warn-a12: rgba(180,83,9,0.102); --warn-a13: rgba(180,83,9,0.111); --warn-a15: rgba(180,83,9,0.128); --warn-a18: rgba(180,83,9,0.153); --warn-a20: rgba(180,83,9,0.17); --warn-a22: rgba(180,83,9,0.187); --warn-a25: rgba(180,83,9,0.212); --warn-a30: rgba(180,83,9,0.255); --warn-a35: rgba(180,83,9,0.297); --warn-a40: rgba(180,83,9,0.34); --warn-a50: rgba(180,83,9,0.425); /* info */ --info-a04: rgba(37,99,235,0.034); --info-a06: rgba(37,99,235,0.051); --info-a08: rgba(37,99,235,0.068); --info-a10: rgba(37,99,235,0.085); --info-a12: rgba(37,99,235,0.102); --info-a13: rgba(37,99,235,0.111); --info-a15: rgba(37,99,235,0.128); --info-a18: rgba(37,99,235,0.153); --info-a20: rgba(37,99,235,0.17); --info-a22: rgba(37,99,235,0.187); --info-a25: rgba(37,99,235,0.212); --info-a30: rgba(37,99,235,0.255); --info-a35: rgba(37,99,235,0.297); --info-a40: rgba(37,99,235,0.34); --info-a50: rgba(37,99,235,0.425); /* sólidos */ --emerald: #047857; --green-solid: #15803d; --green-bright: #16a34a; --danger-solid: #dc2626; --danger-deep: #b91c1c; --amber-solid: #b45309; --amber-fg: #92400e; --slate-fg: #5b686d; --slate-400: #475569; --ink-panel: #eef0f3; /* ─── Cunhados da cauda · lado claro ─── */ --neutral-57: #666666; --amber-72: #842900; --amber-87: #5d4500; --blue-71: #004e8e; --green-69: #005800; --amber-74: #763600; --amber-72-2: #713a00; --orange-60: #be0d2d; --green-68: #005b1d; --amber-76: #783400; --neutral-95: #1f1f20; --green-85: #005412; --neutral-43: #767676; --neutral-36: #797979; --neutral-29: #aeaeae; --amber-73: #5c4400; --amber-84: #604300; --neutral-9: #dddddd; --green-64: #006700; --orange-59: #d0001d; --green-70: #005900; --blue-59: #0063da; --neutral-85: #1e2730; --green-67: #00612b; --amber-76-2: #673f00; --amber-73-2: #6d3b00; --neutral-4: #d9dde3; --neutral-8: #d8dde4; --neutral-5: #dbdde1; --neutral-92: #1e2022; --neutral-12: #d7dded; --neutral-61: #525b6c; --neutral-81: #2b2f35; --neutral-91: #1f1f20; --neutral-83: #2a2a2a; --neutral-45: #787878; --neutral-7: #717b71; --neutral-58: #62626a; --ink-55: rgba(16,24,40,0.303); --ink-60: rgba(16,24,40,0.33); --ink-65: rgba(16,24,40,0.358); --ink-70: rgba(16,24,40,0.385); --ink-72: rgba(16,24,40,0.396); --ink-80: rgba(16,24,40,0.44); --ink-88: rgba(16,24,40,0.484); --ink-95: rgba(16,24,40,0.522); --ink-96: rgba(16,24,40,0.528); --ink-98: rgba(16,24,40,0.539); --surf-3: #d5dee2; --surf-4: #cad4de; /* ─── Cunhados da cauda · lado claro ─── */ --neutral-61-2: #535e5b; --green-83: #005814; --green-82: #00561a; --neutral-90: #221f1a; --neutral-56: #6d6860; --neutral-55: #626d72; --neutral-17: #c5d1cf; --neutral-0: #dddddd; --amber-70: #5a4310; --green-10: #50725a; --amber-78: #6d3b00; --neutral-45-2: #7c7870; --violet-65: #523fb4; --amber-71: #643f00; --neutral-67: #475058; --neutral-83-2: #252c2a; --neutral-23: #b1c3b5; --violet-67: #004fae; --neutral-6: #d5dee4; --neutral-55-2: #626c69; --neutral-61-3: #545e5a; --neutral-28: #72787b; --neutral-40: #767c84; --neutral-12-2: #d8dde4; --neutral-20: #c1c7d0; --neutral-20-2: #b6cbba; --amber-77: #6a3e00; --neutral-19: #c5cad4; --violet-65-2: #5c37b6; --neutral-12-3: #d4dde6; --neutral-63: #575757; --blue-75: #00488d; --neutral-98: #132319; --neutral-10: #d1dfe6; --neutral-85-2: #212725; --orange-63: #9e313a; --neutral-61-4: #525e5b; --amber-64: #67521e; --neutral-73: #443f37; --green-35: #507259; --neutral-14: #d2d7e0; --orange-57: #df0000; --neutral-48: #767d8b; --green-92: #00532a; --violet-60: #215db5; --amber-71-2: #6e3a00; --neutral-26: #b0b6bc; --blue-57: #406a88; --neutral-81-2: #322d26; --green-92-2: #2e4d3f; --neutral-67-2: #524d46; --blue-68: #005384; --neutral-39: #7a766f; --violet-48: #0063e9; --orange-64: #b20024; --green-90: #005b00; --violet-65-3: #0052ba; --orange-46: #d31428; --green-71: #005a00; --orange-53: #f10000; --neutral-13: #d6dae2; --orange-18: #975a58; --orange-80: #763035; --neutral-94: #221f1a; --amber-50: #806644; --violet-43: #006ad3; --amber-49: #846538; --neutral-7-2: #7b786d; --orange-57-2: #c92100; --neutral-4-2: #807672; --neutral-16: #c4d5e1; --green-87: #00571a; --violet-56: #0066e6; --rose-65: #aa003a; --neutral-11: #d7dedd; --neutral-9-2: #d6dfdd; --neutral-55-3: #606d6a; --neutral-89: #1b211f; --neutral-5-2: #7f7771; --neutral-74: #37403d; --orange-79: #703538; --green-85-2: #005527; --neutral-33: #727a78; --neutral-40-2: #707a78; --orange-74: #7a2d33; --green-86: #00532c; --green-93: #1e5037; --neutral-30: #727c7a; --neutral-19-2: #c4cacd; --neutral-76: #343b39; --green-56: #4f7056; --violet-74: #1b477f; --amber-52: #796944; --green-74: #005a00; --green-62: #006d00; --neutral-85-3: #20262b; --neutral-71: #37483f; --orange-44: #be3e27; --orange-36: #866348; --amber-75: #653e07; --violet-66: #6b2eb1; --green-90-2: #304d3a; --neutral-5-3: #727980; --neutral-6-2: #7f7771; --neutral-4-3: #817575; --neutral-7-3: #cfe1d5; --neutral-15: #ced3db; --neutral-34: #9ba1ad; --green-12: #51725f; --green-74-2: #005900; --neutral-11-2: #d9dde4; --green-29: #56715e; --neutral-27: #adb4bf; --amber-75-2: #634000; --neutral-59: #5c6167; --neutral-19-3: #dac5c4; --orange-68: #8c222e; --neutral-66: #4b524b; --blue-73: #004b92; --amber-67: #6e4700; --violet-78: #144783; --neutral-30-2: #a5acb6; --neutral-17-2: #c8cfd6; --neutral-84: #212926; --neutral-77: #313936; --neutral-56-2: #616b67; --amber-96: #4e471d; --amber-10: #766950; --amber-84-2: #634200; --blue-69: #005876; --violet-44: #5257eb; --orange-56: #e60034; --green-97: #414e00; --green-88: #005d00; --cyan-91: #00595f; --violet-32: #411fff; --violet-60-2: #cc00d3; --neutral-21: #c3c3c3; --blue-72: #32495e; --amber-72-3: #6c3b00; --neutral-39-2: #787780; --green-41: #3d782b; --amber-75-3: #524526; --orange-27: #8d6143; --neutral-86: #1f2624; --orange-73: #763035; --amber-76-3: #793300; --blue-68-2: #004da4; --neutral-98-2: #18221c; --neutral-8-2: #6f7b73; --green-15: #487361; --cyan-55: #007d54; --green-59: #007341; --green-40: #1d7a42; --green-30: #327844; --neutral-50: #777777; --green-16: #457459; --neutral-88: #1f1f20; --orange-63-2: #b70023; --neutral-5-4: #dbdbf0; --violet-9: #6a6789; --neutral-8-3: #dcdce1; --amber-64-2: #704f22; /* ─── Cunhados da cauda · lado claro ─── */ --neutral-93: #1b2025; --neutral-62: #4f5b68; --neutral-17-3: #cecece; --neutral-61-5: #555d66; --neutral-48-2: #787881; --neutral-5-5: #d5dfd8; --blue-72-2: #004795; --neutral-80: #2b3134; --orange-57-3: #cd0027; --neutral-59-2: #566461; --neutral-10-2: #d7dde7; --orange-28: #b9423c; --blue-86: #005568; --amber-79: #703900; --amber-78-2: #673f00; --orange-64-2: #963139; --orange-50: #a94f51; --orange-46-2: #c73037; --orange-52: #c6313b; --green-10-2: #567161; --orange-51: #d90020; --neutral-46: #7f8189; --neutral-79: #313137; --neutral-78: #2c3640; --neutral-57-2: #5b6672; --green-64-2: #1a603c; --blue-86-2: #24496a; --blue-65: #0056b6; --neutral-97: #1c2024; --neutral-85-4: #252528; --neutral-16-2: #c7d1e4; --neutral-51: #73737b; --neutral-72: #424242; --blue-74: #005286; --amber-75-4: #5d4200; --neutral-6-3: #7d786f; --orange-62: #a72b36; --amber-76-4: #793400; --neutral-84-2: #26282b; --neutral-95-2: #182219; /* ─── Cunhados da cauda · lado claro ─── */ --green-70-a55: rgba(0,90,0,0.55); --green-70-a92: rgba(0,90,0,0.92); --green-79-a95: rgba(0,90,0,0.95); --green-70-a75: rgba(0,90,0,0.75); --amber-21-a55: rgba(135,100,65,0.55); --neutral-4-a95: rgba(219,220,234,0.95); --neutral-100-a90: rgba(31,31,32,0.9); --neutral-100-a50: rgba(31,31,32,0.5); --neutral-13-a92: rgba(210,221,226,0.92); --neutral-8-a92: rgba(214,222,225,0.92); --neutral-9-a60: rgba(214,222,228,0.6); --neutral-4-a60: rgba(216,222,224,0.6); --neutral-100-a70: rgba(31,31,32,0.7); --neutral-8-a98: rgba(212,223,219,0.98); --neutral-7-a88: rgba(218,221,229,0.88); --neutral-7-a82: rgba(220,220,228,0.82); --neutral-10-a95: rgba(220,220,229,0.95); --orange-17-a65: rgba(163,83,77,0.65); --orange-20-a80: rgba(171,78,71,0.8); --amber-19-a65: rgba(126,103,61,0.65); --neutral-6-a97: rgba(220,220,228,0.97); --blue-64-a50: rgba(0,88,188,0.5); --neutral-4-a94: rgba(219,220,234,0.94); --neutral-4-a92: rgba(218,222,219,0.92); --neutral-3-a96: rgba(218,221,220,0.96); --neutral-4-a95-2: rgba(218,222,219,0.95); --green-87-a85: rgba(0,87,25,0.85); --amber-72-a92: rgba(132,41,0,0.92); --neutral-3-a82: rgba(220,220,224,0.82); --neutral-5-a92: rgba(217,221,231,0.92); --neutral-10-a82: rgba(221,221,221,0.82); --neutral-6-a72: rgba(221,221,221,0.72); --neutral-4-a94-2: rgba(218,222,219,0.94); --amber-73-a50: rgba(92,68,0,0.5); --amber-84-a90: rgba(102,63,0,0.9); --blue-87-a95: rgba(0,81,106,0.95); --orange-64-a60: rgba(171,6,42,0.6); --neutral-5-a85: rgba(218,221,224,0.85); --green-84-a50: rgba(0,88,25,0.5); --violet-56-a92: rgba(0,97,239,0.92); --violet-48-a92: rgba(0,100,230,0.92); --neutral-6-a96: rgba(213,222,228,0.96); --amber-72-a95: rgba(123,50,0,0.95); --amber-72-a55: rgba(123,50,0,0.55); --orange-55-a50: rgba(205,37,53,0.5); --green-70-a70: rgba(0,90,0,0.7); --neutral-6-a85: rgba(215,222,226,0.85); --neutral-6-a92: rgba(215,222,226,0.92); --neutral-6-a70: rgba(215,222,226,0.7); --neutral-2-a85: rgba(219,221,222,0.85); --neutral-3-a78: rgba(219,221,224,0.78); --amber-48-a55: rgba(133,101,54,0.55); --amber-48-a70: rgba(133,101,54,0.7); --neutral-8-a85: rgba(217,221,227,0.85); --neutral-7-a95: rgba(221,221,221,0.95); --neutral-100-a60: rgba(31,31,32,0.6); --neutral-4-a85: rgba(220,220,224,0.85); --neutral-4-a70: rgba(221,221,221,0.7); --neutral-5-a92-2: rgba(215,222,219,0.92); --orange-55-a55: rgba(205,37,53,0.55); --violet-67-a65: rgba(0,79,174,0.65); --neutral-5-a92-3: rgba(216,222,221,0.92); --green-69-a55: rgba(0,88,0,0.55); --neutral-6-a75: rgba(215,222,226,0.75); --neutral-0-a75: rgba(221,221,221,0.75); --blue-81-a55: rgba(0,80,121,0.55); --neutral-3-a72: rgba(219,221,224,0.72); --neutral-100-a85: rgba(31,31,32,0.85); --amber-84-a65: rgba(102,62,0,0.65); --amber-87-a95: rgba(97,64,0,0.95); --amber-74-a55: rgba(118,54,0,0.55); --blue-80-a70: rgba(0,74,127,0.7); --blue-87-a95-2: rgba(46,72,105,0.95); --neutral-6-a96-2: rgba(220,220,225,0.96); --neutral-4-a55: rgba(220,220,224,0.55); --neutral-4-a72: rgba(219,221,223,0.72); --orange-76-a55: rgba(126,41,49,0.55); --amber-91-a55: rgba(82,71,0,0.55); --orange-76-a50: rgba(126,41,49,0.5); --green-70-a88: rgba(0,90,0,0.88); --amber-81-a88: rgba(105,62,0,0.88); --neutral-5-a86: rgba(215,222,219,0.86); --neutral-5-a85-2: rgba(216,222,221,0.85); --neutral-5-a98: rgba(216,222,221,0.98); --neutral-5-a97: rgba(216,222,221,0.97); --neutral-3-a78-2: rgba(218,221,220,0.78); --neutral-0-a86: rgba(221,221,221,0.86); --neutral-8-a98-2: rgba(218,221,224,0.98); --neutral-5-a98-2: rgba(219,221,223,0.98); --amber-81-a55: rgba(105,62,0,0.55); --neutral-10-a98: rgba(221,221,221,0.98); --neutral-6-a96-3: rgba(221,221,221,0.96); --violet-8-a88: rgba(98,106,133,0.88); --green-31-a55: rgba(48,120,73,0.55); --green-79-a85: rgba(0,90,0,0.85); --neutral-8-a97: rgba(221,221,221,0.97); --neutral-4-a96: rgba(220,220,224,0.96); --neutral-7-a92: rgba(218,221,229,0.92); --neutral-7-a96: rgba(218,221,229,0.96); --neutral-3-a90: rgba(219,221,223,0.9); --neutral-4-a96-2: rgba(218,222,219,0.96); --neutral-5-a95: rgba(216,222,221,0.95); --neutral-3-a62: rgba(218,221,223,0.62); --violet-56-a50: rgba(0,102,230,0.5); --neutral-6-a97-2: rgba(214,223,219,0.97); --orange-55-a60: rgba(205,37,53,0.6); --green-70-a90: rgba(0,90,0,0.9); --neutral-4-a60-2: rgba(220,220,224,0.6); --neutral-4-a78: rgba(220,220,224,0.78); /* ─── Cunhados da cauda · lado claro ─── */ --green-79-a92: rgba(0,90,0,0.92); --neutral-4-a55-2: rgba(216,222,226,0.55); /* ─── Cunhados da cauda · lado claro ─── */ --green-74-3: #005a00; --green-79: #005a00; --green-72: #005a00; --neutral-8-a95: rgba(214,222,225,0.95); --neutral-8-a96: rgba(214,222,225,0.96); --neutral-2-a55: rgba(219,221,222,0.55); --neutral-100-a65: rgba(31,31,32,0.65); --orange-64-a55: rgba(171,6,42,0.55); --neutral-13-a98: rgba(217,217,217,0.98); --neutral-6-a96-4: rgba(220,219,236,0.96); --orange-55-a80: rgba(205,37,53,0.8); --neutral-100-a80: rgba(31,31,32,0.8); /* ─── Cunhados da cauda · lado claro ─── */ --neutral-49: #707c7a; --orange-76: #7e2931; /* ─── Cunhados da cauda · lado claro ─── */ --neutral-7-4: #dddddd; --green-84: #005819; --neutral-6-4: #dddddd; --orange-54: #cd2530; --green-87-2: #005719; --neutral-98-3: #20201e; --blue-64: #0058bc; /* ─── Cunhados da cauda · lado claro ─── */ --amber-77-2: #6e3c00; --blue-72-3: #00528d; --violet-54: #9131f0; --blue-48: #596c86; /* ─── Cunhados da cauda · lado claro ─── */ --orange-64-3: #aa1a00; --duomobi-accent: #15803d; --duomobi-accent-fg: #15803d; --duomobi-accent-soft: rgba(21,128,61,0.08); --duomobi-accent-line: rgba(21,128,61,0.24); --duomobi-accent-darkest: #ffffff; --duomobi-bg: #e4e8ea; --duomobi-bg-elev: #f3f6f7; --duomobi-bg-card: #ffffff; --duomobi-bg-card-hover: #f4f7f8; --duomobi-bg-elevated: #ffffff; --duomobi-line: #d0d8dc; --duomobi-line-strong: #adb8bf; --duomobi-fg-1: #101619; --duomobi-fg-2: #37454c; --duomobi-fg-3: #61707a; --duomobi-fg-4: #8b98a1; } /* A logo da marca (cubos) mantém o degradê original nos dois temas — é identidade, não interface. O drop-shadow verde é que some no claro: halo sobre fundo claro só suja. */ :root[data-theme="light"] .rail-logo svg { filter: none; } /* ═══════════════════════════════════════════════════════════════════════════ A TROCA ─────────────────────────────────────────────────────────────────────────── Caminho principal: View Transitions. O navegador fotografa antes e depois e cruza as duas no COMPOSITOR; o custo para de depender do tamanho do DOM. Em cima disso o JS revela o tema novo por um círculo que cresce do botão. O default do próprio recurso é um cross-fade entre as duas fotos. Ele soma com a onda e dá um borrão — por isso as duas animações padrão são desligadas aqui, e a foto NOVA fica por cima para o círculo ter o que revelar. ═══════════════════════════════════════════════════════════════════════════ */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 2147483646; } /* A CRISTA DA ONDA. `--onda` precisa ser declarada com @property para INTERPOLAR: sem isso é texto, e a animação salta do início ao fim. Os 180px entre o preto e o transparente são a penumbra — é o que separa "régua passando na tela" de "luz acendendo". O JS anima --onda e posiciona a origem no botão clicado. */ /* initial-value ALTO de propósito: fora da animação a máscara tem de estar toda opaca. Com 0px o gradiente fica inteiramente transparente e a camada NOVA some — o plano B do clip-path revelaria uma tela em branco. */ @property --onda { syntax: ''; initial-value: 99999px; inherits: false; } ::view-transition-new(root) { -webkit-mask-image: radial-gradient(circle at var(--onda-x, 100%) var(--onda-y, 0%), #000 calc(var(--onda) - 180px), transparent var(--onda)); mask-image: radial-gradient(circle at var(--onda-x, 100%) var(--onda-y, 0%), #000 calc(var(--onda) - 180px), transparent var(--onda)); } /* Plano B — navegador sem View Transitions. Cross-fade de propriedade, aplicado só durante a troca (a classe entra e sai pelo toggle); do contrário todo hover do sistema ganharia atraso. Só background-color, color e border-color. A versão anterior incluía box-shadow, fill e stroke: medido numa tela de 1.053 nós, aquilo dava 6 quadros em 500ms — ~8fps. box-shadow força repaint de cada elemento, e a diferença entre a sombra interpolar ou saltar ninguém enxerga em 280ms. */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color 260ms var(--ease-out), color 260ms var(--ease-out), border-color 260ms var(--ease-out) !important; } /* Quem pediu menos movimento troca seco — nos dois caminhos. O JS já checa prefers-reduced-motion antes de chamar startViewTransition; isto cobre o plano B e a animação da própria View Transition. */ @media (prefers-reduced-motion: reduce) { html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }