/* ═════════════════════════════════════════════════════════════════════════ GERADO AUTOMATICAMENTE — NÃO EDITE ESTE ARQUIVO. Fonte: frontend/src/theme/design.config.ts Regerar: node scripts/sync-brand-tokens.mjs Editar aqui à mão cria a divergência que este arquivo existe para impedir: o app com uma cor, a web com outra, e ninguém percebe porque as duas telas nunca são abertas lado a lado. ═════════════════════════════════════════════════════════════════════════ */ /* ═════════════════════════════════════════════════════════════════════════ OS DOIS TEMAS, DESDE O PRIMEIRO DIA. O padrão é o ESCURO, porque o painel administrador é ferramenta de trabalho e nasce nele. Qualquer superfície tem três formas de mudar isso: · segue a preferência do sistema · força o claro · força o escuro Uma superfície que não escolhe nenhuma fica no escuro, de propósito: é melhor um padrão declarado do que um tema por acidente. ═════════════════════════════════════════════════════════════════════════ */ :root { /* Identidade */ --action: #FF9600; --action-hover: #D97C00; --action-ink: #000000; --action-soft: rgba(255, 150, 0, 0.14); --action-off: #3F3F46; /* A ação usada como TEXTO ou ÍCONE, e não como fundo. No escuro é a própria cor; no claro ela precisa da versão fechada, senão o laranja some no branco. Sem este token, toda superfície que não é React reinventa um tom escuro à mão — e cada uma inventa o seu. */ --action-text: #FF9600; --soul: #7C4DFF; --soul-light: #A98BFF; --soul-dark: #5B2ED6; --soul-soft: rgba(124, 77, 255, 0.16); --accent: #8AE83C; /* Superfícies */ --bg: #000000; --surface: #111113; --surface-raised: #1A1A1D; --overlay: rgba(0, 0, 0, 0.72); --skeleton: #1A1A1D; /* Tinta */ --text: #FFFFFF; --text-secondary: #B4B4BE; --text-tertiary: #8E8E98; --text-inverse: #000000; --text-on-action: #000000; --text-on-error: #FFFFFF; --text-on-warning: #000000; /* Bordas */ --border: #26262B; --border-subtle: #1A1A1D; --border-focus: #FF9600; /* Status */ --success: #22C55E; --success-soft: rgba(34, 197, 94, 0.16); --warning: #FFC800; --warning-soft: rgba(255, 200, 0, 0.16); --error: #FF4B4B; --error-soft: rgba(255, 75, 75, 0.16); --info: #1CB0F6; --info-soft: rgba(28, 176, 246, 0.16); /* A escada de superfície: o card existe por LUZ, não por borda. */ --edge: rgba(255, 255, 255, 0.07); --lift: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%); /* ── A escada de neutros ──────────────────────────────────────────────── Ela é matéria-prima: a interface pede `--surface` e `--text`, nunca um degrau direto. Os degraus existem aqui para o que NÃO é interface do app — o vidro do aparelho no protótipo, a moldura de um mockup. */ --neutral-0: #000000; --neutral-50: #0A0A0B; --neutral-100: #111113; --neutral-200: #1A1A1D; --neutral-300: #26262B; --neutral-400: #3F3F46; --neutral-500: #6E6E78; --neutral-600: #8E8E98; --neutral-700: #B4B4BE; --neutral-800: #D4D4DC; --neutral-900: #EDEDF0; --neutral-1000: #FFFFFF; /* A COR da sombra, separada das sombras prontas: quem precisa de um desfoque próprio ainda tem que pintar com a mesma tinta. */ --shadow-color: rgba(0, 0, 0, 0.55); /* ── Tipografia ─────────────────────────────────────────────────────── */ --font-ui: ui-rounded, "SF Pro Rounded", Nunito, "Hiragino Maru Gothic ProN", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; --type-displayLg-size: 62px; --type-displayLg-line: 66px; --type-displayLg-weight: 800; --type-displayLg-tracking: -2.2px; --type-displayMd-size: 31px; --type-displayMd-line: 36px; --type-displayMd-weight: 700; --type-displayMd-tracking: -0.7px; --type-titleLg-size: 25px; --type-titleLg-line: 30px; --type-titleLg-weight: 700; --type-titleLg-tracking: -0.5px; --type-title-size: 19px; --type-title-line: 24px; --type-title-weight: 700; --type-title-tracking: -0.2px; --type-titleSm-size: 17px; --type-titleSm-line: 23px; --type-titleSm-weight: 700; --type-titleSm-tracking: -0.1px; --type-body-size: 16.5px; --type-body-line: 23px; --type-body-weight: 500; --type-body-tracking: 0px; --type-bodyStrong-size: 16.5px; --type-bodyStrong-line: 23px; --type-bodyStrong-weight: 700; --type-bodyStrong-tracking: 0px; --type-bodySm-size: 14.5px; --type-bodySm-line: 20px; --type-bodySm-weight: 500; --type-bodySm-tracking: 0px; --type-button-size: 19px; --type-button-line: 24px; --type-button-weight: 700; --type-button-tracking: -0.2px; --type-label-size: 14.5px; --type-label-line: 19px; --type-label-weight: 700; --type-label-tracking: 0.1px; --type-eyebrow-size: 12.5px; --type-eyebrow-line: 16px; --type-eyebrow-weight: 800; --type-eyebrow-tracking: 1.4px; --type-caption-size: 13.5px; --type-caption-line: 18px; --type-caption-weight: 600; --type-caption-tracking: 0px; --type-legal-size: 12px; --type-legal-line: 16px; --type-legal-weight: 500; --type-legal-tracking: 0px; --type-numberGiant-size: 68px; --type-numberGiant-line: 74px; --type-numberGiant-weight: 800; --type-numberGiant-tracking: -2.4px; --type-numberHero-size: 44px; --type-numberHero-line: 48px; --type-numberHero-weight: 800; --type-numberHero-tracking: -1.6px; --type-numberLg-size: 34px; --type-numberLg-line: 38px; --type-numberLg-weight: 800; --type-numberLg-tracking: -1.2px; --type-number-size: 19px; --type-number-line: 24px; --type-number-weight: 700; --type-number-tracking: -0.2px; /* ── Espaço ─────────────────────────────────────────────────────────── */ --space-xxs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 20px; --space-2xl: 24px; --space-3xl: 32px; --space-4xl: 40px; --space-5xl: 48px; --space-6xl: 64px; /* ── Raio ───────────────────────────────────────────────────────────── */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 22px; --radius-2xl: 26px; --radius-3xl: 32px; --radius-full: 9999px; /* ── Borda ──────────────────────────────────────────────────────────── */ --border-hairline: 1px; --border-medium: 1.5px; --border-thick: 2px; --border-focus: 2px; /* ── Opacidade ──────────────────────────────────────────────────────── */ --opacity-disabled: 0.4; --opacity-pressed: 0.92; --opacity-soft: 0.14; --opacity-overlay: 0.72; --opacity-overlayLight: 0.45; /* ── Layout ─────────────────────────────────────────────────────────── */ --layout-screen-padding-h: 22px; --layout-screen-padding-h-cozy: 26px; --layout-screen-padding-h-compact: 16px; --layout-bottom-tab-height: 76px; --layout-safe-bottom-padding: 126px; --layout-min-touch-target: 44px; --layout-button-height-lg: 68px; --layout-button-height-md: 54px; --layout-button-height-sm: 44px; --layout-max-content-width: 640px; --layout-max-text-width: 320px; --layout-max-showcase-width: 1120px; /* ── Movimento ──────────────────────────────────────────────────────── */ --duration-instant: 100ms; --duration-fast: 180ms; --duration-normal: 260ms; --duration-slow: 400ms; --duration-stagger: 40ms; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ── Elevação ───────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.18); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.22); --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.28); /* ── Ícones ─────────────────────────────────────────────────────────── */ --icon-stroke: 1.8; --icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; --icon-2xl: 44px; /* ── O mascote ────────────────────────────────────────────────────────── A paleta de Kuko não troca com o tema: o galo é o galo no claro e no escuro. Ele deriva da identidade sempre que possível, então repinta junto quando a marca mudar de cor. */ --mascot-body-light: #FFB13D; --mascot-body: #FF9600; --mascot-body-deep: #D97C00; --mascot-belly: #FFF1DE; --mascot-comb: #FF4B4B; --mascot-comb-light: #FF7A7A; --mascot-comb-deep: #D63A3A; --mascot-beak: #FFC800; --mascot-beak-light: #FFDC5C; --mascot-beak-deep: #E0AC00; --mascot-tail: #15A34A; --mascot-tail-light: #8AE83C; --mascot-eye: #111113; --mascot-shine: #FFFFFF; --mascot-dream: #1CB0F6; } /* A landing segue quem visita. */ @media (prefers-color-scheme: light) { :root.auto-theme:not([data-theme="dark"]) { --action-ink: #000000; --action-soft: rgba(255, 150, 0, 0.12); --action-off: #D4D4DC; --action-text: #A66000; --soul: #5B2ED6; --soul-light: #7C4DFF; --soul-dark: #111113; --soul-soft: rgba(124, 77, 255, 0.14); --bg: #FFFFFF; --surface: #F7F7F9; --surface-raised: #EDEDF0; --overlay: rgba(0, 0, 0, 0.45); --skeleton: #EDEDF0; /* Não é o preto absoluto: preto puro sobre branco puro cansa a vista em texto corrido. O degrau 100 mantém 18:1, muito acima do mínimo de 4,5:1. ⚠️ A TINTA CLARA NÃO USA OS MESMOS DEGRAUS DA ESCURA, e isso custou uma falha de acessibilidade que passou despercebida por estar no tema errado. O escuro usa 700/600 para secundário/terciário, e sobre preto os dois passam com folga. Espelhar a escada no claro parecia simétrico e estava errado: o degrau 600 sobre branco mede 3,24:1 — reprova o mínimo de 4,5:1 da WCAG AA para texto. Enquanto a web era escura ninguém viu; no dia em que a landing virou clara, o rodapé inteiro e a linha embaixo do botão de baixar nasceram ilegíveis para quem enxerga pouco. Sobre branco cada degrau vale menos, então a tinta clara sobe um degrau: o secundário vai para o 400 (10,5:1) e o terciário para o 500 (5,9:1). Os três níveis continuam distintos, e o terciário passa com margem. Quem mexer nisto de novo: a sonda audit-landing.mjs mede o contraste no navegador e reprova sozinha. */ --text: #111113; --text-secondary: #3F3F46; --text-tertiary: #6E6E78; --text-inverse: #FFFFFF; --border: #D4D4DC; --border-subtle: #EDEDF0; /* As variantes escuras do status: as claras somem sobre branco e reprovam no contraste mínimo de 4,5:1 para texto. */ --success: #15803D; --success-soft: rgba(34, 197, 94, 0.14); --warning: #9A6A00; --warning-soft: rgba(255, 200, 0, 0.14); --error: #C42B2B; --error-soft: rgba(255, 75, 75, 0.14); --info: #0A6E9E; --info-soft: rgba(28, 176, 246, 0.14); --edge: rgba(0, 0, 0, 0.05); --lift: linear-gradient(180deg, rgba(0, 0, 0, 0.012), transparent 42%); } } /* O controle explícito vence sempre — inclusive contra a preferência do sistema. */ :root[data-theme="light"] { --action-ink: #000000; --action-soft: rgba(255, 150, 0, 0.12); --action-off: #D4D4DC; --action-text: #A66000; --soul: #5B2ED6; --soul-light: #7C4DFF; --soul-dark: #111113; --soul-soft: rgba(124, 77, 255, 0.14); --bg: #FFFFFF; --surface: #F7F7F9; --surface-raised: #EDEDF0; --overlay: rgba(0, 0, 0, 0.45); --skeleton: #EDEDF0; /* Não é o preto absoluto: preto puro sobre branco puro cansa a vista em texto corrido. O degrau 100 mantém 18:1, muito acima do mínimo de 4,5:1. ⚠️ A TINTA CLARA NÃO USA OS MESMOS DEGRAUS DA ESCURA, e isso custou uma falha de acessibilidade que passou despercebida por estar no tema errado. O escuro usa 700/600 para secundário/terciário, e sobre preto os dois passam com folga. Espelhar a escada no claro parecia simétrico e estava errado: o degrau 600 sobre branco mede 3,24:1 — reprova o mínimo de 4,5:1 da WCAG AA para texto. Enquanto a web era escura ninguém viu; no dia em que a landing virou clara, o rodapé inteiro e a linha embaixo do botão de baixar nasceram ilegíveis para quem enxerga pouco. Sobre branco cada degrau vale menos, então a tinta clara sobe um degrau: o secundário vai para o 400 (10,5:1) e o terciário para o 500 (5,9:1). Os três níveis continuam distintos, e o terciário passa com margem. Quem mexer nisto de novo: a sonda audit-landing.mjs mede o contraste no navegador e reprova sozinha. */ --text: #111113; --text-secondary: #3F3F46; --text-tertiary: #6E6E78; --text-inverse: #FFFFFF; --border: #D4D4DC; --border-subtle: #EDEDF0; /* As variantes escuras do status: as claras somem sobre branco e reprovam no contraste mínimo de 4,5:1 para texto. */ --success: #15803D; --success-soft: rgba(34, 197, 94, 0.14); --warning: #9A6A00; --warning-soft: rgba(255, 200, 0, 0.14); --error: #C42B2B; --error-soft: rgba(255, 75, 75, 0.14); --info: #0A6E9E; --info-soft: rgba(28, 176, 246, 0.14); --edge: rgba(0, 0, 0, 0.05); --lift: linear-gradient(180deg, rgba(0, 0, 0, 0.012), transparent 42%); } :root[data-theme="dark"] { /* Identidade */ --action: #FF9600; --action-hover: #D97C00; --action-ink: #000000; --action-soft: rgba(255, 150, 0, 0.14); --action-off: #3F3F46; /* A ação usada como TEXTO ou ÍCONE, e não como fundo. No escuro é a própria cor; no claro ela precisa da versão fechada, senão o laranja some no branco. Sem este token, toda superfície que não é React reinventa um tom escuro à mão — e cada uma inventa o seu. */ --action-text: #FF9600; --soul: #7C4DFF; --soul-light: #A98BFF; --soul-dark: #5B2ED6; --soul-soft: rgba(124, 77, 255, 0.16); --accent: #8AE83C; /* Superfícies */ --bg: #000000; --surface: #111113; --surface-raised: #1A1A1D; --overlay: rgba(0, 0, 0, 0.72); --skeleton: #1A1A1D; /* Tinta */ --text: #FFFFFF; --text-secondary: #B4B4BE; --text-tertiary: #8E8E98; --text-inverse: #000000; --text-on-action: #000000; --text-on-error: #FFFFFF; --text-on-warning: #000000; /* Bordas */ --border: #26262B; --border-subtle: #1A1A1D; --border-focus: #FF9600; /* Status */ --success: #22C55E; --success-soft: rgba(34, 197, 94, 0.16); --warning: #FFC800; --warning-soft: rgba(255, 200, 0, 0.16); --error: #FF4B4B; --error-soft: rgba(255, 75, 75, 0.16); --info: #1CB0F6; --info-soft: rgba(28, 176, 246, 0.16); /* A escada de superfície: o card existe por LUZ, não por borda. */ --edge: rgba(255, 255, 255, 0.07); --lift: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%); } /* Pontos onde o layout foi REALMENTE verificado, não apenas presumido: xs: 320px · sm: 375px · md: 414px · lg: 768px · xl: 1024px */