/* ============================================================ PSICOLOGIA PRETA — DESIGN SYSTEM · tokens.css ------------------------------------------------------------ @layer tokens — a ÚNICA fonte de verdade de cor + escala. Extraído, bit a bit, dos 4 arquétipos aprovados (home / categoria / artigo / app). NENHUMA cor foi re-escolhida: os valores NIGHT e DAY abaixo são os mesmos dos arquétipos. "Uma identidade, duas peles." O :root carrega o que NÃO é cor (tipografia, escala, espaço, easing). [data-theme="night"] e [data-theme="day"] carregam a paleta OKLCH — night é a terra ameixa-cacau lamplit; day é a MESMA paleta girada do avesso (tinta-terra + mel sobre pergaminho quente), NÃO creme+terracota. @property --warm governa o aquecimento no scroll (0->1): NIGHT: --warm acende a terra (claridade/croma/calor sobem). DAY : --warm acende o pergaminho de LEVE (a leitura nunca escurece com o scroll). Os tokens estão agrupados em: A) NÚCLEO — partilhado por TODAS as páginas (bg, ink, honey, hair, glass-nav, scrim, cookie, etc.). Todo template usa. B) PÁGINA — tokens que só algumas páginas consomem (folha de leitura, rail de cadernos, campos de formulário, etc.). Inertes onde não usados; ficam aqui para uma fonte única. ============================================================ */ @layer tokens { @property --warm { syntax:''; inherits:true; initial-value:0; } /* ========================================================= :root — tokens compartilhados, INDEPENDENTES de tema. (Superset dos 4 arquétipos: inclui --fs-read/--measure do artigo e --nav-h do app; inertes onde não usados.) ========================================================= */ :root{ /* tipografia — UMA família variável (sem serifa de acento, sem par display+body) */ --f-sans: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --f-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, monospace; /* escala fluida — a grotesca fala em peso, largura e tamanho óptico. Os clamps de h1/h2/h3 variam por TIPO de página (a home grita mais que o app). O template sobrescreve estes três se precisar; os defaults abaixo são os da home/categoria (a voz "editorial cheia"). */ --fs-mono: 11.5px; --fs-xs: 13px; --fs-sm: 15px; --fs-body: 17px; --fs-lead: 20px; --fs-h3: clamp(22px, 2.5vw, 31px); --fs-h2: clamp(29px, 4.4vw, 56px); --fs-h1: clamp(38px, 7.2vw, 102px); --fs-whisper: clamp(25px, 4.7vw, 60px); /* a fala íntima, segunda pessoa */ --fs-read: clamp(17.5px, 1.35vw, 19px); /* corpo de leitura longa (artigo) */ /* espaço */ --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:64px;--sp-16:96px;--sp-24:140px; --section-py: clamp(72px, 12vw, 176px); --wrap: 1200px; --pad: clamp(20px, 5vw, 64px); --measure: 62ch; /* medida de leitura (artigo) */ --nav-h: 64px; /* altura da nav p/ sticky (app: indicador de etapas) */ /* movimento — respiração, não estroboscopia */ --ease: cubic-bezier(.22,.61,.18,1); --ease-soft: cubic-bezier(.33,.86,.32,1); --dur:.62s; --dur-fast:.34s; } /* ========================================================= TEMA NIGHT — a superfície warm-dark lamplit. A terra ameixa-cacau é o CHÃO; a tinta é luz creme-quente. LUZ SOBRE A TERRA: --warm 0->1 acende a terra. Os valores são bit-a-bit os dos arquétipos night (idênticos nos 4). ========================================================= */ [data-theme="night"]{ color-scheme: dark; --warm: 0; /* -------- A) NÚCLEO (todas as páginas) -------- */ /* chão: claridade/croma/calor sobem com --warm — a terra acende */ --L-bg: calc(0.190 + var(--warm) * 0.040); --C-bg: calc(0.040 + var(--warm) * 0.022); --H-bg: calc(26 + var(--warm) * 8); --bg: oklch(var(--L-bg) var(--C-bg) var(--H-bg)); /* terra viva */ --bg-2: oklch(calc(var(--L-bg) + 0.030) calc(var(--C-bg) + 0.010) calc(var(--H-bg) + 4)); --bg-warm: oklch(0.330 0.072 40); /* recesso de lâmpada (o coração) */ --bg-lift: oklch(0.265 0.052 34); /* cartões: terra um tom acima */ /* tinta: luz creme-quente sobre a terra (não branco morto, não cinza) */ --ink: oklch(0.948 0.020 76); --ink-soft: oklch(0.852 0.028 70); --ink-dim: oklch(0.730 0.034 62); --ink-faint:oklch(0.620 0.036 54); /* mel: o acento — brasa quente baixa, viva, jamais neon nem terracota-kit */ --honey: oklch(0.795 0.142 74); /* mel/âmbar luminoso */ --honey-deep: oklch(0.700 0.150 64); --honey-lift: oklch(0.860 0.110 82); --honey-glow: oklch(0.82 0.16 72 / .34); --honey-wash: oklch(0.50 0.10 56 / .42); --honey-ink: oklch(0.22 0.05 32); /* tinta escura sobre superfície mel (botões/chips) */ --hair: oklch(0.86 0.03 76 / .20); --hair-dim: oklch(0.86 0.03 76 / .10); /* superfícies translúcidas reutilizadas (nav, drawer, scrim, cookie, vinheta) */ --glass-nav: oklch(0.20 0.04 30 / .62); /* nav translúcida */ --scrim: oklch(0.12 0.03 28 / .58); /* scrim do drawer */ --vignette: oklch(0.12 0.03 28 / .55); /* vinheta de canto (multiply no night) */ --cookie-bg: oklch(0.26 0.05 36); --skip-ink: oklch(0.20 0.04 32); /* tinta do skip-link sobre o mel */ /* -------- B) TOKENS DE PÁGINA -------- */ /* HOME — finder, ilha "ser quem acolhe", cadernos */ --core-grad-b: oklch(0.28 0.06 34); /* 2º stop do gradiente do "core" */ --field-bg: oklch(0.30 0.04 36 / .55); /* inputs (busca, cadastro) */ --field-bg-focus: oklch(0.34 0.05 38 / .7); --pro-bg-h: oklch(0.30 0.055 36); /* card de profissional no hover */ --acc-bg: oklch(0.40 0.08 56 / .3); /* tag de abordagem (acento) */ --cont-a: oklch(0.40 0.085 44); /* ilha quente (join/continue), stop A */ --cont-b: oklch(0.30 0.065 38); /* stop B */ --on-cont-dim: oklch(0.92 0.03 70 / .7); /* rótulos sobre o bloco quente */ --on-cont-lab: oklch(0.90 0.03 70 / .7); --join-ok-bg: oklch(0.34 0.07 42); /* confirmação do cadastro */ --caderno-bg-h:oklch(0.40 0.06 52 / .25); /* chip de caderno no hover */ --pro-av-inset:oklch(0.40 0.10 50 / .35); /* sombra interna do monograma */ /* ARTIGO — folha de leitura, lead, pull, continue/relacionados */ --read: oklch(0.252 0.040 33); /* folha de leitura: terra levantada, calma */ --read-in: oklch(0.292 0.046 36); --shadow-sheet: oklch(0.06 0.02 28 / .9); --sheet-inset: oklch(0.92 0.04 76 / .05); --lead-grad-b: oklch(0.27 0.05 34); --rel-bg: oklch(0.24 0.04 34 / .6); --rel-bg-h: oklch(0.27 0.05 36 / .75); /* CATEGORIA — rail de cadernos, pílula "kind", bloco "closer" */ --glass-rail: oklch(0.20 0.04 30 / .72); --kind-bg: oklch(0.40 0.08 56 / .25); /* pílula "kind" (tipo do texto): recesso mel-terroso */ --kind-border: var(--honey-glow); --kind-ink: var(--honey-lift); --closer-a: oklch(0.40 0.085 44); /* "closer": ilha escura lush */ --closer-b: oklch(0.30 0.065 38); --closer-coord:oklch(0.92 0.03 70 / .7); /* APP — nav opaca, indicador de etapas, campos, checkbox, preview, sucesso, erro */ --warn: oklch(0.800 0.150 58); /* sinal de erro: âmbar quente, não vermelho-alarme */ --warn-bg: oklch(0.40 0.10 48 / .30); --nav-bg: oklch(0.20 0.04 30 / .72); --ind-bg: oklch(0.205 0.042 30 / .82); --ind-cell: oklch(0.24 0.045 32 / .5); --ind-active: oklch(0.34 0.07 42); --ind-done: oklch(0.30 0.06 40 / .6); --field-bg-f: oklch(0.34 0.05 38 / .7); /* (alias de campo do app; --field-bg acima é partilhado) */ --chk-bg: oklch(0.27 0.04 34 / .45); --chk-bg-on: oklch(0.36 0.07 46 / .55); --btn-disabled:oklch(0.40 0.03 40); --pv-tag-ident-bg: oklch(0.40 0.08 56 / .3); --pv-note-bg: oklch(0.32 0.055 40 / .5); --suc-scrim: oklch(0.15 0.03 28 / .82); --suc-a: oklch(0.34 0.07 42); --suc-b: oklch(0.27 0.055 36); --suc-link-bg: oklch(0.30 0.06 40 / .6); --av-inset: oklch(0.40 0.10 50 / .35); --veil: oklch(0.12 0.03 28 / .58); } /* ========================================================= TEMA DAY — a MESMA paleta PP, INVERTIDA. "A lâmpada no talo." Chão warm-light no MESMO matiz ameixa (claridade altíssima, croma baixo: pergaminho/osso quente, NÃO off-white de marca). Tinta = a ameixa-cacau ESCURA que era CHÃO no night. Mel mantido (hue ~56), aprofundado para AAA sobre o claro. Zero terracota, zero serifa, zero grafismo étnico: é o sistema PP girado do avesso, grotesca só. --warm acende o pergaminho de LEVE. ========================================================= */ [data-theme="day"]{ color-scheme: light; --warm: 0; /* -------- A) NÚCLEO (todas as páginas) -------- */ --L-bg: calc(0.945 - var(--warm) * 0.010); --C-bg: calc(0.018 + var(--warm) * 0.006); --H-bg: calc(58 + var(--warm) * 6); --bg: oklch(var(--L-bg) var(--C-bg) var(--H-bg)); /* pergaminho-ameixa quente */ --bg-2: oklch(calc(var(--L-bg) - 0.022) calc(var(--C-bg) + 0.006) calc(var(--H-bg) - 4)); --bg-warm: oklch(0.905 0.040 64); /* recesso de lâmpada, claro e quente */ --bg-lift: oklch(0.922 0.026 58); /* cartões: pergaminho um tom acima */ /* tinta: a ameixa-cacau ESCURA invertida em texto (quase-preto-quente) */ --ink: oklch(0.235 0.034 38); --ink-soft: oklch(0.330 0.036 40); --ink-dim: oklch(0.460 0.040 44); --ink-faint:oklch(0.560 0.038 48); /* mel: o MESMO acento (hue ~56), aprofundado para contrastar no claro */ --honey: oklch(0.560 0.150 56); --honey-deep: oklch(0.500 0.150 50); --honey-lift: oklch(0.620 0.140 60); --honey-glow: oklch(0.70 0.16 64 / .26); --honey-wash: oklch(0.78 0.13 66 / .42); --honey-ink: oklch(0.985 0.010 80); /* tinta CLARA sobre superfície mel (botões/chips) */ --hair: oklch(0.30 0.04 40 / .22); --hair-dim: oklch(0.30 0.04 40 / .12); --glass-nav: oklch(0.965 0.018 60 / .78); --scrim: oklch(0.30 0.04 40 / .34); --vignette: oklch(0.78 0.05 56 / .26); /* vinheta clareia de leve no day (normal) */ --cookie-bg: oklch(0.940 0.034 58); --skip-ink: oklch(0.985 0.010 80); /* -------- B) TOKENS DE PÁGINA -------- */ /* HOME */ --core-grad-b: oklch(0.918 0.034 56); --field-bg: oklch(0.975 0.014 60 / .8); --field-bg-focus: oklch(0.992 0.012 70 / .92); --pro-bg-h: oklch(0.962 0.026 60); --acc-bg: oklch(0.86 0.09 66 / .3); --cont-a: oklch(0.912 0.050 62); /* ilha quente: cartão pergaminho saturado */ --cont-b: oklch(0.882 0.058 54); --on-cont-dim: oklch(0.36 0.05 44 / .85); --on-cont-lab: oklch(0.40 0.05 46 / .9); --join-ok-bg: oklch(0.928 0.046 64); --caderno-bg-h:oklch(0.90 0.05 62 / .5); --pro-av-inset:oklch(0.55 0.10 50 / .25); /* ARTIGO */ --read: oklch(0.968 0.012 62); /* folha: osso quente levantado, um tom acima do chão */ --read-in: oklch(0.932 0.028 60); --shadow-sheet: oklch(0.55 0.06 44 / .22); --sheet-inset: oklch(1 0 0 / .6); --lead-grad-b: oklch(0.918 0.034 56); --rel-bg: oklch(0.978 0.012 62 / .8); --rel-bg-h: oklch(0.962 0.024 60 / .92); /* CATEGORIA */ --glass-rail: oklch(0.958 0.022 60 / .80); --kind-bg: oklch(0.90 0.060 64 / .55); /* pílula "kind": recesso mel claro quente */ --kind-border: oklch(0.62 0.13 58 / .40); --kind-ink: oklch(0.500 0.150 52); --closer-a: oklch(0.918 0.050 60); /* "closer": cartão pergaminho saturado */ --closer-b: oklch(0.880 0.062 52); --closer-coord:oklch(0.42 0.05 46); /* APP */ --warn: oklch(0.520 0.150 48); /* erro: âmbar profundo legível sobre o claro */ --warn-bg: oklch(0.86 0.07 60 / .55); --nav-bg: oklch(0.965 0.018 60 / .80); --ind-bg: oklch(0.968 0.016 60 / .86); --ind-cell: oklch(0.940 0.022 60 / .7); --ind-active: oklch(0.915 0.044 62); --ind-done: oklch(0.952 0.026 60 / .8); --field-bg-f: oklch(0.988 0.012 64); --chk-bg: oklch(0.958 0.020 60); --chk-bg-on: oklch(0.905 0.055 60); --btn-disabled:oklch(0.880 0.018 58); --pv-tag-ident-bg: oklch(0.900 0.060 60 / .6); --pv-note-bg: oklch(0.940 0.034 58 / .7); --suc-scrim: oklch(0.30 0.04 40 / .42); --suc-a: oklch(0.962 0.030 62); --suc-b: oklch(0.928 0.040 56); --suc-link-bg: oklch(0.948 0.030 60 / .8); --av-inset: oklch(0.50 0.12 56 / .30); --veil: oklch(0.78 0.05 56 / .26); } } /* ============================================================ NOTA SOBRE MICRO-VARIANTES (honestidade de extração) ------------------------------------------------------------ Três tokens tinham um valor levemente diferente entre arquétipos, por ajuste de legibilidade documentado (não de identidade). Aqui ficou o valor canônico (home/artigo). Onde uma página precisar do seu micro-ajuste, o template a sobrescreve localmente em :root: --bg-lift DAY: home/categoria .922 · artigo .915 · app .978 (cards de profissional respiram um tiquinho mais claros; o app usa .978 p/ a folha do preview). --ink-soft DAY: home/app .330 · categoria .330 · artigo .310 (artigo abaixa p/ corpo longo AAA folgado). --honey-lift DAY: home/artigo .620 · categoria .512 · app .560 (ênfase de termo no corpo; categoria/app aprofundam p/ contraste em texto pequeno sobre claro). Todos os valores NIGHT são byte-idênticos entre os 4 arquétipos. ============================================================ */