/* tokens.css — Design tokens da plataforma Portal do Nutri. DUAS CAMADAS: 1) Camada de MARCA (--navy-*, --steel-*, --bone, --gold…): a paleta crua de um tenant, gerada pelo motor a partir da logo. NÃO é usada direto pelos componentes do portal. 2) Camada SEMÂNTICA do portal (--portal-*): o que os componentes realmente usam. Vira CLARA ou ESCURA conforme o modo (decidido pela luminância da logo do tenant). Default (sem tenant) = NEUTRO CLARO: branco/cinza, fonte Inter, sem navy nem dourado. */ :root { /* ───────── Camada de MARCA (default NEUTRO; o tenant sobrescreve via branding.cores) ───────── */ /* Base escura da marca (usada SÓ no modo escuro e na tinta de documento). Default = ardósia neutra. */ --navy-900: #15171b; --navy-800: #1c1f24; --navy-700: #262a30; --navy-600: #30353d; --navy-500: #3d434d; /* Acento da marca. Default = ardósia neutra (sem verde/navy/dourado de cliente). */ --steel: #5d6773; /* interativo: links, foco, base de botão */ --steel-bright: #717c8a; /* energia: CTAs, dados, gráficos */ --steel-soft: #9aa3af; /* apoio/eyebrow */ --steel-metal: #4a525d; --steel-ink: #39414c; /* acento legível sobre superfície clara (documentos) */ --ink: #1a1a1c; --graphite: #08080a; --sheen: #ffffff; --bone: #f2f2f1; /* texto claro (sobre superfície escura no modo escuro) */ --bone-dim: #b4b4b2; /* texto claro secundário */ --platinum: #cccccb; --gold: #9a9488; /* "acento dourado" da marca — default neutro taupe */ --green: #57b45a; /* SÓ métrica positiva (semântico, universal) */ --danger: #d9637f; /* erro/alerta (semântico, universal) */ /* Tokens de DOCUMENTO (plano/ficha/relatório = papel claro). Derivam da marca. */ --doc-ink: var(--navy-900); --doc-ink-soft: color-mix(in srgb, var(--navy-900) 64%, #ffffff); --doc-card: color-mix(in srgb, var(--navy-900) 4%, #ffffff); --gold-ink: color-mix(in srgb, var(--gold) 62%, #000000); --gold-mid: color-mix(in srgb, var(--gold) 82%, #ffffff); --gold-line: color-mix(in srgb, var(--gold) 40%, #ffffff); --gold-bg: color-mix(in srgb, var(--gold) 17%, #ffffff); --steel-light: color-mix(in srgb, var(--steel-bright) 72%, #ffffff); --line: color-mix(in srgb, var(--steel-soft) 16%, transparent); --line-strong: color-mix(in srgb, var(--steel-soft) 28%, transparent); --grad-aco: linear-gradient(135deg, color-mix(in srgb, var(--steel) 70%, #fff) 0%, var(--steel) 42%, color-mix(in srgb, var(--steel) 60%, #000) 100%); --grad-navy: linear-gradient(160deg, var(--navy-700), var(--navy-800) 58%, var(--navy-900)); --grad-card: linear-gradient(160deg, var(--navy-700), var(--navy-800)); /* ───────── Camada SEMÂNTICA do PORTAL (o que os componentes usam) ───────── Default = NEUTRO CLARO (sem tenant identificado). O motor troca por modo via [data-portal-modo="light"|"dark"] no . */ --portal-bg: #f5f5f3; /* fundo do body/layout */ --portal-nav-bg: #ffffff; /* topbar + barra lateral */ --portal-card-bg: #ffffff; /* cards e painéis */ --portal-surface-2: #ededeb; /* superfície secundária / inputs */ --portal-text: #2a2a2a; /* texto primário */ --portal-text-dim: #6b6b6b; /* texto secundário */ --portal-text-faint: #8c8c8c; /* eyebrow / terciário */ --portal-line: rgba(0,0,0,0.10); /* borda sutil */ --portal-line-strong: rgba(0,0,0,0.16); --portal-icon: #6b7280; /* ícone (cinza médio neutro) */ --portal-fill: #d9d9d5; /* base de overlays translúcidos */ /* Acento + nav cromático (o motor sobrescreve inline; aqui ficam os fallbacks legíveis). */ --portal-accent: var(--steel); --portal-accent-strong: var(--steel-bright); --portal-accent-soft: color-mix(in srgb, var(--steel) 14%, transparent); --portal-on-accent: #ffffff; /* texto sobre o acento (botão) */ --portal-nav-text: var(--portal-text); /* nav default = claro → texto escuro */ --portal-nav-icon: var(--portal-icon); --portal-nav-line: var(--portal-line); --portal-positive: #3fae6a; /* semântico universal (não segue a marca) */ --portal-danger: #d9637f; /* Personalidade ESTRUTURAL (o motor sobrescreve por arquétipo; fallbacks = escala neutra). */ --portal-radius: var(--r-md); --portal-radius-sm: var(--r-sm); --portal-radius-lg: var(--r-lg); --portal-spacing-scale: 1.2; --portal-card-pad: 20px; --portal-gap: 16px; --portal-card-shadow: var(--shadow-soft); --portal-border-width: 1px; --portal-font-weight-display: var(--fw-heading); --portal-icon-style: outline; --portal-icon-stroke: 1.7; --portal-section-gap: 64px; /* respiro entre seções (arejado ↔ denso) */ --portal-title-tracking: 0.04em; /* tracking de título de seção */ --portal-avatar-radius: 50%; /* círculo macio ↔ squircle */ --portal-dur: 240ms; /* motion personality (suave ↔ seco) */ --portal-sep-opacity: 0.55; /* separador de seção (tênue ↔ marcado) */ --portal-sep-height: 1px; --portal-presence: 0.5; /* eixo arejado(0)↔denso(1) p/ debug/branching */ /* PAPEL do documento (plano/ficha) — off-white com o TINTE do ouro/champanhe da marca, derivado da logo. Sempre claro (paper é claro), mesmo no modo escuro. Não é mais o #f8f3e8 chumbado. */ --doc-paper: color-mix(in srgb, var(--gold) 12%, #fdfaf3); --doc-paper-2: color-mix(in srgb, var(--gold) 5%, #fffdf9); /* 3 PAPÉIS tipográficos (o motor sobrescreve por arquétipo). voice = personalidade; label = técnico. */ --font-voice: var(--font-serif); --font-label: var(--font-mono); --font-weight-masthead: 800; /* peso do título-marca; motor: elegant 300 · modern 500 · bold 800 */ /* Tipografia DEFAULT = Inter (neutra). O tenant troca pela fonte do arquétipo. */ --font-display: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-serif: Georgia, 'Times New Roman', serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; --sp-1: 6px; --sp-2: 12px; --sp-3: 18px; --sp-4: 26px; --sp-5: 38px; --sp-6: 56px; --sp-7: 80px; --fw-heading: 700; --tracking-heading: -0.02em; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; --shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.12); --shadow-lift: 0 26px 60px rgba(0, 0, 0, 0.18); --rail: 264px; --topbar-h: 70px; --content-max: 1080px; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } /* ===== MODO ESCURO — logo de luminância baixa (ex.: MR Assessoria) ===== */ /* Superfícies = base escura da marca; texto claro; ícone no acento. */ [data-portal-modo="dark"] { --portal-bg: var(--navy-900); --portal-nav-bg: var(--navy-900); --portal-card-bg: var(--navy-600); --portal-surface-2: var(--navy-800); --portal-text: var(--bone); --portal-text-dim: var(--bone-dim); --portal-text-faint: var(--steel-soft); --portal-line: var(--line); --portal-line-strong: var(--line-strong); --portal-icon: var(--steel-bright); --portal-fill: var(--navy-900); --portal-accent: var(--steel-bright); --portal-accent-strong: var(--steel-bright); --portal-accent-soft: color-mix(in srgb, var(--steel-bright) 18%, transparent); --portal-on-accent: #0c1118; --portal-nav-text: var(--bone); --portal-nav-icon: var(--steel-bright); --portal-nav-line: var(--line); --shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.34); --shadow-lift: 0 26px 60px rgba(0, 0, 0, 0.46); } /* ===== MODO CLARO COM MARCA — logo de luminância alta (ex.: Delli, navy sobre kraft) ===== */ /* Fundo = papel da marca (off-white quente do kraft/creme) quando há suporte detectado; senão, derivado do acento. Cards brancos; texto escuro derivado; ícone no acento. */ [data-portal-modo="light"] { --portal-bg: var(--paper, color-mix(in srgb, var(--steel) 7%, #ffffff)); --portal-nav-bg: #ffffff; --portal-card-bg: #ffffff; --portal-surface-2: var(--paper-2, color-mix(in srgb, var(--steel) 6%, #f3f3f1)); --portal-text: color-mix(in srgb, var(--steel) 20%, #1d1d1b); --portal-text-dim: color-mix(in srgb, var(--steel) 14%, #6a6a66); --portal-text-faint: color-mix(in srgb, var(--steel) 26%, #8c8c88); --portal-line: color-mix(in srgb, var(--steel) 16%, rgba(0,0,0,0.08)); --portal-line-strong: color-mix(in srgb, var(--steel) 22%, rgba(0,0,0,0.14)); --portal-icon: var(--steel); --portal-fill: color-mix(in srgb, var(--steel) 12%, #dadad6); --portal-accent: var(--steel); --portal-accent-strong: var(--steel-bright); --portal-accent-soft: color-mix(in srgb, var(--steel) 12%, #ffffff); --portal-on-accent: #ffffff; --portal-nav-text: var(--portal-text); /* fallback do nav claro = branco → texto escuro */ --portal-nav-icon: var(--steel); --portal-nav-line: var(--portal-line); }