/* ============================================================================ MarIA — Design Tokens Fonte única de verdade da identidade visual. DOIS EIXOS INDEPENDENTES: data-paleta QUAL identidade — "argila" (padrão) | "cobalto" data-theme QUANTA luz — "light" | "dark" (ausente = segue o SO) Quatro combinações, e nenhuma delas duplica o mapeamento semântico. Uso: -> argila, seguindo o SO -> argila escuro -> cobalto, seguindo o SO Camadas: 1) PRIMITIVOS — rampas cruas por família (NUNCA usar direto na UI) 2) PALETA — apelidos genéricos por identidade (--n-*, --d-*, --a-*…) 3) SEMÂNTICOS — mapeados por modo (usar SEMPRE estes na UI) 4) ESCALARES — tipografia, espaçamento, raio, sombra, transição POR QUE A CAMADA 2 EXISTE Antes havia só primitivo -> semântico, e o bloco escuro já aparecia duas vezes (uma no `@media`, outra em `[data-theme="dark"]`, porque o override manual precisa vencer o do sistema). Acrescentar uma identidade nesse desenho custaria mais dois blocos escuros e um claro — seis ao todo, nove na terceira identidade, e cada token novo teria de ser escrito em todos. Com os apelidos, o mapeamento semântico é escrito UMA vez e não sabe qual identidade está ativa. Uma paleta nova custa um bloco de apelidos e nada mais. É também o que torna testável a promessa "toda paleta define todo token": ver `tests/tokens-paletas.test.ts`. ========================================================================== */ /* ─── 1) PRIMITIVOS ─────────────────────────────────────────────────────── Rampas cruas, agrupadas por identidade. Não são consumidas pela UI nem pelos semânticos — só pela camada 2, logo abaixo. */ :root { /* ---- ARGILA: neutros quentes (stone) — base do modo claro ---- */ --stone-50: #FAF9F5; --stone-100: #F4F2EC; --stone-150: #EEEBE3; --stone-200: #E8E5DD; --stone-300: #D8D4C8; --stone-400: #B7B2A4; --stone-500: #908B7E; --stone-600: #6B6960; --stone-700: #4A4842; --stone-800: #2C2A26; --stone-900: #1A1A18; /* ---- ARGILA: neutros quentes escuros (espresso) — base do modo escuro ---- */ --esp-950: #141210; --esp-900: #181613; --esp-850: #1E1B17; --esp-800: #221E1A; --esp-750: #28231D; --esp-700: #2F2922; --esp-600: #38322B; --esp-500: #4A4339; --esp-400: #6E665A; --esp-300: #A39C8E; --esp-200: #C9C2B4; --esp-100: #E6E1D6; --esp-50: #F5F2EB; /* ---- ARGILA: clay / terracota — acento da marca ---- */ --clay-50: #FAF0EB; --clay-100: #F2E5DE; --clay-200: #E6C5B6; --clay-300: #DBA88E; --clay-400: #D28E70; --clay-500: #CC785C; --clay-600: #B5654A; --clay-700: #9C543C; --clay-800: #7E4430; --clay-900: #5E3324; /* Clay clareado p/ uso sobre superfícies escuras (contraste AA) */ --clay-bright: #E0906F; --clay-bright2: #EBA088; --clay-bright3: #F0AE96; /* ---- COBALTO: neutros frios (slate) — base do modo claro ---- Derivados da landing (`rolclaro/sistemas/site/tailwind.config.mjs`): light #F8FAFC, muted #64748B, border #E2E8F0 são os da marca; o resto completa a rampa. */ --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-150: #EAEFF5; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B; --slate-900: #0F172A; /* ---- COBALTO: navy — base do modo escuro ---- #0A1628 (brand.dark) e #1E3A5F (brand.navy) são da marca; a rampa é construída entre e ao redor deles. */ --navy-950: #060D18; --navy-900: #0A1628; --navy-850: #0E1B30; --navy-800: #122238; --navy-750: #16283F; --navy-700: #1B3049; --navy-600: #1E3A5F; --navy-500: #2A4C78; --navy-400: #4A6C99; --navy-300: #8AA3C0; --navy-200: #B9C9DC; --navy-100: #DCE6F0; --navy-50: #EFF4F9; /* ---- COBALTO: laranja — acento da marca (CTA da landing) ---- */ --orange-50: #FFF4EC; --orange-100: #FFE7D5; --orange-200: #FDCBA6; --orange-300: #FBAE78; --orange-400: #FA9247; --orange-500: #F97316; --orange-600: #EA6B0A; /* brand.orangeHover */ --orange-700: #C2570A; --orange-800: #9A4508; --orange-900: #7A3706; --orange-bright: #FB8C3C; --orange-bright2: #FCA05A; --orange-bright3: #FDB478; } /* ─── 2) PALETA — apelidos por identidade ──────────────────────────────── Os semânticos (camada 3) só falam estes nomes: --n-* neutro do modo CLARO (50 mais claro … 900 mais escuro) --n-card superfície elevada do modo claro (normalmente branco) --d-* neutro do modo ESCURO (950 mais escuro … 50 mais claro) --a-* acento: rampa clara (50/100/200/500/600/700) --a-bright* acento clareado, p/ contraste sobre superfície escura --a-on texto SOBRE o acento no claro; --a-on-dark, no escuro --ok/warn/err/info-* estados --sombra-rgb / --sombra-escura-rgb canal das sombras e do scrim As cores que precisam de transparência são declaradas em CANAIS (`204 120 92`) e não em hex, porque `rgb(var(--x) / 40%)` só funciona com canais soltos. A cor opaca é derivada de volta logo abaixo, para não haver duas fontes da mesma cor podendo divergir. */ /* ---- Identidade padrão: ARGILA ("Warm Clean") ---- Estrutura limpa dos dashboards de referência + calor e contenção da Anthropic. Um acento (clay), off-white quente, bordas hairline, sombra mínima. É o que o Portal usa desde o começo, e continua o padrão de quem nunca escolheu nada. */ :root { --n-50: var(--stone-50); --n-100: var(--stone-100); --n-150: var(--stone-150); --n-200: var(--stone-200); --n-300: var(--stone-300); --n-400: var(--stone-400); --n-500: var(--stone-500); --n-600: var(--stone-600); --n-700: var(--stone-700); --n-800: var(--stone-800); --n-900: var(--stone-900); --n-card: #FFFFFF; --d-950: var(--esp-950); --d-900: var(--esp-900); --d-850: var(--esp-850); --d-800: var(--esp-800); --d-750: var(--esp-750); --d-700: var(--esp-700); --d-600: var(--esp-600); --d-500: var(--esp-500); --d-400: var(--esp-400); --d-300: var(--esp-300); --d-200: var(--esp-200); --d-100: var(--esp-100); --d-50: var(--esp-50); --a-50: var(--clay-50); --a-100: var(--clay-100); --a-200: var(--clay-200); --a-500: var(--clay-500); --a-600: var(--clay-600); --a-700: var(--clay-700); --a-rgb: 204 120 92; /* = --clay-500 */ --a-bright-rgb: 224 144 111; /* = --clay-bright */ --a-bright: var(--clay-bright); --a-bright2: var(--clay-bright2); --a-bright3: var(--clay-bright3); /* Branco sobre clay-500 dá 3,28:1 — abaixo de AA para texto normal, acima do mínimo de 3:1 para texto grande e componente de interface. É o valor homologado do produto desde o início e não muda aqui: trocá-lo repintaria todo botão primário de uma identidade que já está em produção. A paleta cobalto, nascendo agora, não repete a escolha — ver `--a-on` lá. */ --a-on: #FFFFFF; --a-on-dark: #201A16; /* Estados quentes: verde musgo, âmbar e terracota — não néon. */ --ok-100: #E3F0E7; --ok-500: #3D8A5F; --ok-600: #2F6E4C; --ok-bright-rgb: 111 190 144; --warn-100: #F6ECD9; --warn-500: #B7791F; --warn-600: #946017; --warn-bright-rgb: 224 169 74; --err-100: #F6E1DE; --err-500: #C2453A; --err-600: #9F392F; --err-bright-rgb: 224 121 107; /* Texto sobre o PREENCHIMENTO de erro (botão destrutivo). Branco funciona no claro (4,99:1) e reprova no escuro (2,95:1), porque `--danger` clareia lá — daí o par, como em `--a-on`. */ --err-on: #FFFFFF; --err-on-dark: #201A16; --info-100: #E4ECF6; --info-500: #3E6FB0; --info-bright-rgb: 107 155 214; /* Sombra quente: o preto puro suja o off-white. */ --sombra-rgb: 26 26 24; --sombra-escura-rgb: 0 0 0; /* Categórica p/ gráficos — mesma temperatura da identidade. */ --viz-1: #CC785C; /* clay */ --viz-2: #2E8B8B; /* teal */ --viz-3: #D9A441; /* amber */ --viz-4: #8A6FB0; /* plum */ --viz-5: #5B7DB1; /* slate */ --viz-6: #4A8C63; /* green */ } /* ---- Identidade COBALTO ---- Derivada da landing page da Rolclaro. Neutros frios (slate), estrutura em navy, acento laranja — a mesma cor que lá é o CTA. A INVERSÃO DO TEXTO DO BOTÃO É DELIBERADA. A landing escreve branco sobre #F97316, o que dá 2,8:1 e reprova AA. Aqui o texto sobre o acento é navy escuro (6,4:1). Botão laranja com texto quase preto é, de quebra, mais próximo do vocabulário industrial da marca do que o branco lavado. */ :root[data-paleta="cobalto"] { --n-50: var(--slate-50); --n-100: var(--slate-100); --n-150: var(--slate-150); --n-200: var(--slate-200); --n-300: var(--slate-300); --n-400: var(--slate-400); --n-500: var(--slate-500); --n-600: var(--slate-600); --n-700: var(--slate-700); --n-800: var(--slate-800); --n-900: var(--slate-900); --n-card: #FFFFFF; --d-950: var(--navy-950); --d-900: var(--navy-900); --d-850: var(--navy-850); --d-800: var(--navy-800); --d-750: var(--navy-750); --d-700: var(--navy-700); --d-600: var(--navy-600); --d-500: var(--navy-500); --d-400: var(--navy-400); --d-300: var(--navy-300); --d-200: var(--navy-200); --d-100: var(--navy-100); --d-50: var(--navy-50); --a-50: var(--orange-50); --a-100: var(--orange-100); --a-200: var(--orange-200); --a-500: var(--orange-500); --a-600: var(--orange-600); /* NÃO é o --orange-700 da rampa (#C2570A). Aquele dá 3,78:1 sobre --accent-soft, e --accent-text é justamente o par dele: o rótulo da faixa de cliente assumido, o link dentro de chip. Escurecido até passar AA nos dois fundos que ele encontra (5,76:1 no branco, 4,84:1 no soft). */ --a-700: #A84A08; --a-rgb: 249 115 22; /* = --orange-500 */ --a-bright-rgb: 251 140 60; /* = --orange-bright */ --a-bright: var(--orange-bright); --a-bright2: var(--orange-bright2); --a-bright3: var(--orange-bright3); --a-on: var(--navy-900); --a-on-dark: var(--navy-900); /* Estados frios, para acompanhar o slate. */ --ok-100: #DCFCE7; --ok-500: #16A34A; --ok-600: #15803D; --ok-bright-rgb: 74 222 128; --warn-100: #FEF3C7; --warn-500: #D97706; --warn-600: #B45309; --warn-bright-rgb: 251 191 36; --err-100: #FEE2E2; --err-500: #DC2626; --err-600: #B91C1C; --err-bright-rgb: 248 113 113; --err-on: #FFFFFF; /* 4,83:1 sobre #DC2626 */ --err-on-dark: var(--navy-900); /* 6,55:1 sobre #F87171 */ --info-100: #DBEAFE; --info-500: #2563EB; /* brand.blue */ --info-bright-rgb: 96 165 250; /* Sombra fria (slate-900), para não amarelar o azul. */ --sombra-rgb: 15 23 42; --sombra-escura-rgb: 0 0 0; --viz-1: #F97316; /* orange — acento */ --viz-2: #2563EB; /* blue — marca */ --viz-3: #14B8A6; /* teal */ --viz-4: #8B5CF6; /* violet */ --viz-5: #64748B; /* slate */ --viz-6: #16A34A; /* green */ } /* Cores opacas derivadas dos canais — uma fonte só por cor, em qualquer identidade. Fica fora dos blocos acima de propósito: vale para todas. */ :root { --ok-bright: rgb(var(--ok-bright-rgb)); --warn-bright: rgb(var(--warn-bright-rgb)); --err-bright: rgb(var(--err-bright-rgb)); --info-bright: rgb(var(--info-bright-rgb)); } /* ─── 3) SEMÂNTICOS — MODO CLARO (canônico) ────────────────────────────── Padrão de :root = claro. Estes são os tokens que a UI consome, e são os ÚNICOS que ela pode consumir. Escritos uma vez, servem toda identidade. */ :root { color-scheme: light; /* superfícies */ --bg: var(--n-50); /* fundo do app */ --bg-subtle: var(--n-100); /* faixa/seção alternada */ --surface: var(--n-card); /* cards, painéis */ --surface-2: var(--n-50); /* superfície aninhada / nested */ --surface-sunken:var(--n-100); /* inputs, code block, áreas fundas*/ --surface-nav: var(--n-100); /* sidebar/header: calha estrutural mais funda que o canvas */ --overlay: rgb(var(--sombra-rgb) / 0.40); /* scrim de modal */ /* texto */ --text-strong: var(--n-900); /* títulos, valores */ --text: var(--n-800); /* corpo */ --text-muted: var(--n-600); /* labels, apoio */ --text-faint: var(--n-500); /* legenda, placeholder */ --text-on-accent:var(--a-on); /* texto sobre botão de acento */ /* bordas */ --border: var(--n-200); /* hairline padrão */ --border-strong: var(--n-300); /* divisória/hover mais visível */ --border-input: var(--n-300); /* contorno de inputs */ /* esqueleto de carregamento — precisa de token próprio porque a direção do contraste inverte: no claro o bloco é mais ESCURO que o card, no escuro é mais CLARO. Reaproveitar `--surface-sunken` deixava buracos pretos. */ --skeleton: var(--n-200); --skeleton-brilho: var(--n-100); /* acento */ --accent: var(--a-500); /* preenchimento: botão, ativo */ --accent-hover: var(--a-600); --accent-active: var(--a-700); --accent-text: var(--a-700); /* link/texto inline (AA no claro)*/ --accent-soft: var(--a-100); /* fundo de chip/estado ativo */ --accent-soft-hover: var(--a-50); --accent-border: var(--a-200); --ring: rgb(var(--a-rgb) / 0.40); /* anel de foco */ /* semânticos */ --success: var(--ok-500); --success-text: var(--ok-600); --success-soft: var(--ok-100); --warning: var(--warn-500); --warning-text: var(--warn-600); --warning-soft: var(--warn-100); --danger: var(--err-500); --danger-text: var(--err-600); --danger-soft: var(--err-100); /* Texto sobre o PREENCHIMENTO de erro — o botão destrutivo. Existe pelo mesmo motivo de `--text-on-accent`: `--danger` clareia no modo escuro, e uma cor de texto cravada no CSS não acompanha. */ --text-on-danger:var(--err-on); --info: var(--info-500); --info-soft: var(--info-100); /* sombras — quase imperceptíveis (elevação por cor, não por peso) */ --shadow-xs: 0 1px 2px rgb(var(--sombra-rgb) / 0.04); --shadow-sm: 0 1px 3px rgb(var(--sombra-rgb) / 0.06), 0 1px 2px rgb(var(--sombra-rgb) / 0.04); --shadow-md: 0 4px 12px rgb(var(--sombra-rgb) / 0.08); --shadow-lg: 0 12px 32px rgb(var(--sombra-rgb) / 0.12); } /* ─── 3) SEMÂNTICOS — MODO ESCURO (derivado) ───────────────────────────── Aplica quando o SO pede escuro (sem override) OU [data-theme="dark"]. O bloco aparece DUAS vezes, e não há como evitar: `@media` e atributo têm especificidades diferentes, e o override manual precisa vencer o do SO inclusive quando o SO pede claro. O que a camada 2 garante é que ele não se multiplique também por identidade — estes dois blocos servem argila, cobalto e qualquer paleta futura. Se mexer em um, mexer no outro. `tests/tokens-paletas.test.ts` compara os dois e reprova quando divergem. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--d-900); --bg-subtle: var(--d-850); --surface: var(--d-800); --surface-2: var(--d-750); --surface-sunken:var(--d-950); --surface-nav: var(--d-850); --overlay: rgb(var(--sombra-escura-rgb) / 0.55); --text-strong: var(--d-50); --text: var(--d-100); --text-muted: var(--d-300); --text-faint: var(--d-400); --text-on-accent:var(--a-on-dark); --border: var(--d-600); --border-strong: var(--d-500); --border-input: var(--d-500); --skeleton: var(--d-700); --skeleton-brilho: var(--d-600); --accent: var(--a-bright); --accent-hover: var(--a-bright2); --accent-active: var(--a-bright3); --accent-text: var(--a-bright2); --accent-soft: rgb(var(--a-bright-rgb) / 0.14); --accent-soft-hover: rgb(var(--a-bright-rgb) / 0.20); --accent-border: rgb(var(--a-bright-rgb) / 0.32); --ring: rgb(var(--a-bright-rgb) / 0.45); --success: var(--ok-bright); --success-text: var(--ok-bright); --success-soft: rgb(var(--ok-bright-rgb) / 0.15); --warning: var(--warn-bright); --warning-text: var(--warn-bright); --warning-soft: rgb(var(--warn-bright-rgb) / 0.15); --danger: var(--err-bright); --danger-text: var(--err-bright); --danger-soft: rgb(var(--err-bright-rgb) / 0.15); --text-on-danger:var(--err-on-dark); --info: var(--info-bright); --info-soft: rgb(var(--info-bright-rgb) / 0.15); --shadow-xs: 0 1px 2px rgb(var(--sombra-escura-rgb) / 0.30); --shadow-sm: 0 1px 3px rgb(var(--sombra-escura-rgb) / 0.40), 0 1px 2px rgb(var(--sombra-escura-rgb) / 0.30); --shadow-md: 0 4px 14px rgb(var(--sombra-escura-rgb) / 0.45); --shadow-lg: 0 14px 38px rgb(var(--sombra-escura-rgb) / 0.55); } } /* Override manual explícito (independe do SO) — repete o bloco escuro */ :root[data-theme="dark"] { --bg: var(--d-900); --bg-subtle: var(--d-850); --surface: var(--d-800); --surface-2: var(--d-750); --surface-sunken:var(--d-950); --surface-nav: var(--d-850); --overlay: rgb(var(--sombra-escura-rgb) / 0.55); --text-strong: var(--d-50); --text: var(--d-100); --text-muted: var(--d-300); --text-faint: var(--d-400); --text-on-accent:var(--a-on-dark); --border: var(--d-600); --border-strong: var(--d-500); --border-input: var(--d-500); --skeleton: var(--d-700); --skeleton-brilho: var(--d-600); --accent: var(--a-bright); --accent-hover: var(--a-bright2); --accent-active: var(--a-bright3); --accent-text: var(--a-bright2); --accent-soft: rgb(var(--a-bright-rgb) / 0.14); --accent-soft-hover: rgb(var(--a-bright-rgb) / 0.20); --accent-border: rgb(var(--a-bright-rgb) / 0.32); --ring: rgb(var(--a-bright-rgb) / 0.45); --success: var(--ok-bright); --success-text: var(--ok-bright); --success-soft: rgb(var(--ok-bright-rgb) / 0.15); --warning: var(--warn-bright); --warning-text: var(--warn-bright); --warning-soft: rgb(var(--warn-bright-rgb) / 0.15); --danger: var(--err-bright); --danger-text: var(--err-bright); --danger-soft: rgb(var(--err-bright-rgb) / 0.15); --text-on-danger:var(--err-on-dark); --info: var(--info-bright); --info-soft: rgb(var(--info-bright-rgb) / 0.15); --shadow-xs: 0 1px 2px rgb(var(--sombra-escura-rgb) / 0.30); --shadow-sm: 0 1px 3px rgb(var(--sombra-escura-rgb) / 0.40), 0 1px 2px rgb(var(--sombra-escura-rgb) / 0.30); --shadow-md: 0 4px 14px rgb(var(--sombra-escura-rgb) / 0.45); --shadow-lg: 0 14px 38px rgb(var(--sombra-escura-rgb) / 0.55); } /* ─── 4) ESCALARES — tipografia, espaço, raio, transição ───────────────── Iguais em toda identidade e nos dois modos. Identidade aqui é COR: mudar fonte ou densidade por paleta mudaria o layout, não a pele. */ :root { /* famílias (self-host nos apps; styleguide pode usar CDN) */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: "Newsreader", Georgia, "Times New Roman", serif; /* só momentos editoriais */ --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace; /* tamanhos (rem, base 16px) */ --fs-display: 2rem; /* 32 — hero/login (pode ser serif) */ --fs-h1: 1.5rem; /* 24 — título de página */ --fs-h2: 1.125rem; /* 18 — título de seção */ --fs-h3: 1rem; /* 16 — subtítulo */ --fs-body: 0.875rem; /* 14 — corpo/UI */ --fs-sm: 0.8125rem; /* 13 — dado de tabela, apoio */ --fs-xs: 0.6875rem; /* 11 — label caixa-alta, legenda */ /* pesos */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* line-height */ --lh-tight: 1.2; --lh-snug: 1.4; --lh-base: 1.55; --lh-loose: 1.65; /* tracking */ --ls-tight: -0.01em; --ls-normal: 0; --ls-caps: 0.06em; /* labels caixa-alta */ /* espaçamento (escala 4px) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* raios */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; /* transições */ --t-fast: 120ms ease; --t: 180ms ease; --t-slow: 280ms ease; /* layout */ --nav-w: 232px; --header-h: 56px; --content-max: 1240px; }