/* * Tuiga AI — Design Tokens * Fonte da verdade visual do projeto (ver TechStack/stackGuidelines.md, regra 3.4). * Estes tokens sao consumidos por tailwind.config.js (via funcao withOpacity) e * permanecem validos quando a stack migrar para Django REST + Next.js: sao CSS * puro, sem nada especifico de Django ou Tailwind. * * Paleta de origem (ver Branding/tuiga-ai-brand-guidelines_1.md): * Electric #00FFB2 Void #060608 Deep #0B0D14 Mid #1A1D2E * Ivory #F2F0ED Depth #7B5EA7 * * Padrao "RGB triplet": cada cor guarda "R G B" (sem rgb(), sem virgulas) para que * o Tailwind monte `rgb(var(--x) / )` e habilite opacidade via classes como * bg-electric/10, text-ivory/60, border-electric/30 — assim nao precisamos de um * token dedicado para cada estado de hover/disabled/overlay, a opacidade resolve. */ :root { color-scheme: dark; /* ---- Paleta bruta da marca (RGB triplets) ---- */ --color-electric-rgb: 0 255 178; --color-electric-hover-rgb: 0 224 157; /* Electric ~12% mais escuro, para hover/active */ --color-void-rgb: 6 6 8; --color-deep-rgb: 11 13 20; --color-mid-rgb: 26 29 46; --color-ivory-rgb: 242 240 237; --color-depth-rgb: 123 94 167; --color-depth-hover-rgb: 107 79 147; /* Depth ~12% mais escuro, para hover/active */ /* ---- Tokens semanticos (o que os componentes devem usar) ---- * Modo escuro e o padrao da marca: estes valores em :root JA sao o tema escuro. * O tema claro so existe via [data-theme="light"] abaixo, sobrescrevendo estas * variaveis — nenhum componente deve referenciar "void"/"ivory" diretamente, * e sim os aliases semanticos (bg, surface, text, border...), para funcionar * nos dois temas sem duplicar markup. */ --surface-bg-rgb: var(--color-void-rgb); /* fundo principal da pagina */ --surface-bg-secondary-rgb: var(--color-deep-rgb); /* fundo de secoes alternadas */ --surface-raised-rgb: var(--color-mid-rgb); /* cards, inputs, superficies elevadas */ --surface-raised-hover-rgb: 34 38 58; /* Mid + leve luz, hover de cards/list items */ --content-primary-rgb: var(--color-ivory-rgb); /* texto principal sobre "bg"/"surface" */ --content-inverse-rgb: var(--color-void-rgb); /* texto sobre superficies claras (ex: botao Electric) */ --border-default-rgb: var(--color-ivory-rgb); /* usado sempre com opacidade baixa, ex: border-border/10 */ /* ---- Tipografia ---- * Space Grotesk: geometrica, quadrada, traços grossos disponiveis (500-700) — * ecoa o wordmark "TUIGA AI." e o simbolo anguloso da marca. Usada em * headings/display/UI de destaque. * Inter: neutra e muito legivel em blocos de texto longos/tamanhos pequenos — * evita fadiga que uma geometrica causaria em paragrafos inteiros. Par comum e * testado (display geometrico + body neutro), ambas gratuitas no Google Fonts. */ --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; /* Escala tipografica (base 16px, razao ~1.25 nos degraus maiores) */ --text-xs: 0.75rem; /* 12px — caption/legendas */ --text-sm: 0.875rem; /* 14px — small/labels */ --text-base: 1rem; /* 16px — body */ --text-lg: 1.125rem; /* 18px — body destacado / h6 */ --text-xl: 1.25rem; /* 20px — h5 */ --text-2xl: 1.5rem; /* 24px — h4 */ --text-3xl: 1.875rem; /* 30px — h3 */ --text-4xl: 2.25rem; /* 36px — h2 (mobile) */ --text-5xl: 3rem; /* 48px — h1 (mobile) / h2 (desktop) */ --text-6xl: 3.75rem; /* 60px — h1 (desktop) */ --text-7xl: 4.5rem; /* 72px — hero display (desktop) */ /* ---- Espacamento ---- * Grid base de 4px (padrao Tailwind) + tokens semanticos para ritmo vertical * de secoes de landing page, que se repete muito e merece nome proprio em vez * de numeros soltos (py-24 vs py-32 tem que ser uma decisao, nao um acidente). */ --space-section-y-mobile: 4rem; /* 64px — padding vertical de
no mobile */ --space-section-y-desktop: 8rem; /* 128px — padding vertical de
no desktop */ --space-container-x: 1.5rem; /* 24px — padding lateral do container no mobile */ --container-max: 80rem; /* 1280px — largura maxima do conteudo */ /* ---- Radius ---- * Escala curta e deliberadamente menos arredondada que o padrao "SaaS fofo": * a marca e angulosa (simbolo em "L", wordmark quadrado), entao cantos muito * arredondados (full/pill) ficam reservados a badges/pills, nao a cards/botoes. */ --radius-sm: 0.375rem; /* 6px — inputs pequenos, badges retangulares */ --radius-md: 0.625rem; /* 10px — botoes, inputs */ --radius-lg: 1rem; /* 16px — cards */ --radius-xl: 1.5rem; /* 24px — cards grandes / seccoes destacadas */ /* ---- Shadows ---- * Box-shadow preto classico quase nao aparece sobre um fundo ja quase-preto * (Void). Por isso: (1) shadows escuras servem so pra separar "surface" (Mid) * do fundo, e (2) o recurso de destaque real e o "glow" em Electric, usado em * hover/focus de elementos interativos — luz, nao sombra, comunica "estado ativo". */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4); --shadow-md: 0 4px 12px 0 rgb(0 0 0 / 0.45); --shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.55); --shadow-glow-accent: 0 0 0 1px rgb(var(--color-electric-rgb) / 0.4), 0 0 24px 0 rgb(var(--color-electric-rgb) / 0.25); --shadow-glow-accent-sm: 0 0 12px 0 rgb(var(--color-electric-rgb) / 0.35); --shadow-focus-ring: 0 0 0 3px rgb(var(--color-electric-rgb) / 0.45); } /* * Modo claro: opt-in via [data-theme="light"] no (ver app.js). * Mantemos Electric e Depth identicos nos dois temas — sao a assinatura da marca * e nao devem mudar; só as superficies/texto neutros se invertem. */ [data-theme="light"] { color-scheme: light; --surface-bg-rgb: var(--color-ivory-rgb); --surface-bg-secondary-rgb: 230 227 222; /* Ivory levemente mais escuro */ --surface-raised-rgb: 255 255 255; --surface-raised-hover-rgb: 246 245 242; --content-primary-rgb: var(--color-void-rgb); --content-inverse-rgb: var(--color-void-rgb); /* texto sobre Electric continua escuro nos dois temas */ --border-default-rgb: var(--color-void-rgb); } /* Reset minimo + aplicacao dos tokens base. Utilitarios de layout ficam a cargo do Tailwind. */ html { font-family: var(--font-body); } body { background-color: rgb(var(--surface-bg-rgb)); color: rgb(var(--content-primary-rgb)); }