/* ═══════════════════════════════════════════════════════════════════════════ OSS YOGA · DESIGN SYSTEM — TOKENS A única fonte das decisões visuais da escola. Fase 1H, 12/08/2026. ═══════════════════════════════════════════════════════════════════════════ A regra que governa este arquivo: **a Oss Yoga é reconhecida pela elegância, não pelos efeitos.** Nada aqui existe para impressionar. Sombra é rasa, movimento é curto, cor é escassa, e o ouro aparece em fio — não em bloco. O que faz a tela parecer cara é o espaço em volta do texto, o alinhamento que não vacila e o mesmo botão em todo lugar. ── COMO USAR ───────────────────────────────────────────────────────────── Nenhuma tela declara `#hex`. Toda cor, medida, sombra e curva sai daqui. Um teste varre as folhas de estilo das telas e reprova hex solto: é o que impede o sistema de virar sugestão. ── POR QUE NÃO HÁ @layer ───────────────────────────────────────────────── O Dojo roda também EMBUTIDO no Squarespace, e ali as regras do tema chegam sem camada. Estilo sem camada ganha de estilo em camada, sempre — usar @layer aqui entregaria o Dojo ao tema do Squarespace. Cascata simples, então. ── O QUE ESTAS CORES JÁ RESOLVEM ───────────────────────────────────────── Contraste medido, não estimado (WCAG 2.1, fundo pergaminho #F5F1E8): tinta 15.9:1 AAA tinta-2 7.0:1 AA — texto secundário tinta-3 5.0:1 AA — meta, legendas, datas ouro-tinta 5.2:1 AA — o dourado LEGÍVEL (o decorativo dá 2:1) ok / atencao / erro 5.6 / 5.2 / 6.7:1 AA O `--oss-ouro` puro NUNCA carrega texto sobre fundo claro. Ele é fio, moldura e foco. Para palavra dourada existe `--oss-ouro-tinta`. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── MARCA ─────────────────────────────────────────────────────────────── Os quatro que são a escola. Não se inventam novos. */ --oss-floresta: #0D1A10; /* o verde quase preto da marca */ --oss-verde: #2C6E3F; /* o verde vivo, para ação institucional */ --oss-ouro: #C9A94F; /* decorativo: fio, foco, moldura */ --oss-ouro-claro: #DCC070; /* o ouro sobre fundo escuro, onde ele brilha */ --oss-pergaminho: #F5F1E8; /* o papel */ /* ── SUPERFÍCIES ───────────────────────────────────────────────────────── Três, e só três. Mais do que isso vira sujeira visual. */ --oss-fundo: var(--oss-pergaminho); /* a página */ --oss-carta: #FFFFFF; /* cartão, campo, painel */ --oss-carta-2: #FBF8F0; /* faixa alternada, hover suave */ --oss-escuro: var(--oss-floresta); /* faixas escuras, botão primário */ --oss-escuro-2: #152218; /* o hover do escuro */ /* ── TINTA ─────────────────────────────────────────────────────────────── Uma hierarquia de três. A quarta seria ilegível. */ --oss-tinta: #0D1A10; /* título e corpo */ --oss-tinta-2: #46554B; /* apoio, descrição */ --oss-tinta-3: #5E6B62; /* meta: data, contagem, legenda */ --oss-tinta-clara: #F5F1E8; /* sobre fundo escuro */ --oss-tinta-clara-2: rgba(245, 241, 232, .74); --oss-ouro-tinta: #7A6220; /* a palavra dourada: link, número, etiqueta */ /* ── FIOS ──────────────────────────────────────────────────────────────── O sistema é feito de linhas de 1px. Elas fazem o trabalho que sombra e caixa fariam pior. */ --oss-fio: rgba(13, 26, 16, .12); --oss-fio-forte: rgba(13, 26, 16, .22); --oss-fio-ouro: rgba(201, 169, 79, .45); --oss-fio-claro: rgba(245, 241, 232, .18); /* sobre fundo escuro */ --oss-fio-claro-2: rgba(245, 241, 232, .22); /* o mesmo fio, em foco */ /* ── Camadas SOBRE fundo escuro (a barra lateral do Core) ──────────────── Uma superfície escura não tem "cartão" nem "faixa alternada": o que separa nela é o próprio pergaminho em véu. Três degraus bastam — mais que isso ninguém distingue, e cada um sem nome vira um rgba solto no meio de uma folha de tela. */ --oss-veu-1: rgba(245, 241, 232, .055); /* campo em repouso */ --oss-veu-2: rgba(245, 241, 232, .07); /* o que o dedo toca */ --oss-veu-3: rgba(245, 241, 232, .11); /* o que está escolhido */ /* O véu que ESCURECE: o inverso dos três acima. Cobre a página quando uma camada sobe por cima dela — a gaveta do painel no celular, e o dia em que houver modal. A camada dela já tinha nome (`--oss-z-veu`); a cor faltava, e faltar cor é como um `rgba` solto aparece no meio de uma folha de tela. */ --oss-veu-escuro: rgba(13, 26, 16, .5); /* ── DE ONDE VEIO (a caixa de oportunidades) ───────────────────────────── Três tons, e não um por canal: o que se distingue de longe é ficha de formação, lista de espera e "o resto". Nove cores numa lista seriam nove cores para decorar. Saturação baixa de propósito — quem grita na faixa é o SELO da espera, que fica ao lado do nome. */ --oss-canal-inscricao: #2C6E3F; /* verde: alguém escolheu um curso */ --oss-canal-espera: var(--oss-ouro); /* ouro: aguarda uma vaga abrir */ --oss-canal-outro: rgba(13, 26, 16, .3); /* neutro: WhatsApp, e-mail, a mão */ /* ── RECADO ────────────────────────────────────────────────────────────── Cada um com um fundo de tinta lavada. Nunca só a cor: todo estado do sistema carrega ícone e palavra junto. */ --oss-ok: #2F6B46; --oss-ok-fundo: #EDF3EE; --oss-atencao: #8A5A2B; --oss-atencao-fundo: #FBF4DF; --oss-erro: #8C3B2E; --oss-erro-fundo: #F7ECE9; --oss-info: #46554B; --oss-info-fundo: #F1EFE7; /* ── AS FAMÍLIAS DO DOJO ───────────────────────────────────────────────── Taxonomia de conteúdo, não decoração: a cor diz de que prática se trata. Ficam no sistema porque a etiqueta é um componente. */ --oss-vinyasa: #C4522A; --oss-yin: #1B2A4A; --oss-oss: #7A9175; --oss-breath: #C9A94F; --oss-integracao: #4A7C72; /* ── LETRA ─────────────────────────────────────────────────────────────── Duas famílias, e a mesma pilha em toda tela — inclusive no Dojo, que até hoje caía em Georgia e parecia outro produto. Georgia continua no fim da pilha: é o que aparece enquanto a fonte carrega, e dentro do Squarespace, onde não mandamos no . */ --oss-serif: 'Cormorant Garamond', Cormorant, Georgia, 'Times New Roman', serif; --oss-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --oss-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* O logotipo, como caminho — para o componente `.oss-logo` poder usá-lo como máscara e tingi-lo com a cor do texto. */ --oss-logo-arquivo: url("/assets/logos/logo-preto.png"); /* Escala tipográfica. Razão ~1.2 na base e ~1.25 no display: sobe devagar, que é o que deixa a página calma. Os títulos usam clamp() para caber no celular sem quebrar palavra e respirar no desktop — é a única fluidez do sistema, e existe porque título quebrado em duas linhas no iPhone é o defeito de tipografia mais comum que existe. ── O PRINCÍPIO DOS 60 ANOS ────────────────────────────────────────── Uma professora de 60 anos precisa ler tudo sem treinamento e sem óculos de leitura novos. Por isso esta escala NÃO tem o degrau de 11px que quase todo painel usa em legenda: o menor corpo do sistema é 12px, e ele só carrega ETIQUETA EM CAIXA ALTA — palavra curta, muito espacejada, nunca informação. Tudo que precisa ser lido começa em 14px. */ --oss-t-micro: .75rem; /* 12px — só etiqueta em caixa alta */ --oss-t-mini: .875rem; /* 14px — meta, data, contagem */ --oss-t-peq: .9375rem; /* 15px — apoio, item de lista */ --oss-t-base: 1rem; /* 16px — corpo, e o mínimo de todo campo */ --oss-t-md: 1.125rem; /* 18px */ --oss-t-lg: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); --oss-t-xl: clamp(1.5rem, 1.3rem + 1vw, 1.9rem); --oss-t-2xl: clamp(1.9rem, 1.6rem + 1.6vw, 2.6rem); --oss-t-3xl: clamp(2.4rem, 1.9rem + 2.4vw, 3.4rem); --oss-peso-leve: 300; --oss-peso-nl: 400; --oss-peso-medio: 500; --oss-peso-forte: 600; --oss-linha-apertada: 1.2; /* títulos */ --oss-linha-normal: 1.5; /* interface */ --oss-linha-solta: 1.7; /* texto corrido, para ler de verdade */ /* Caixa alta só com espacejamento — sem ele a palavra vira bloco. */ --oss-tracking-alta: .14em; --oss-tracking-medio: .04em; /* ── ESPAÇO ────────────────────────────────────────────────────────────── Base 4. Toda margem e todo respiro sai desta régua; é ela que faz telas diferentes parecerem a mesma casa. */ --oss-e-1: 4px; --oss-e-2: 8px; --oss-e-3: 12px; --oss-e-4: 16px; --oss-e-5: 24px; --oss-e-6: 32px; --oss-e-7: 48px; --oss-e-8: 64px; --oss-e-9: 96px; /* ── CURVA ─────────────────────────────────────────────────────────────── Borda suave, não borda redonda. A diferença importa: 10px num cartão de 360px de largura é um canto que a mão reconhece e o olho não percebe — é o que Linear, Vercel e o painel da Stripe fazem. 20px seria um aplicativo de 2019; 0px seria uma tabela de banco. A pílula existe para UMA coisa: etiqueta de estado. */ --oss-curva-sm: 6px; /* botão, campo, chip */ --oss-curva: 10px; /* cartão, painel, faixa */ --oss-curva-md: 14px; /* superfície grande, modal */ --oss-curva-pill: 999px; /* etiqueta, avatar */ /* ── ELEVAÇÃO ──────────────────────────────────────────────────────────── Quatro degraus, e todos com a cor da marca dentro: sombra cinza neutra sobre papel creme fica com aparência suja, esverdeada errada. Cada degrau soma uma sombra de contato curta a uma sombra de ambiente larga — é isso que faz o objeto parecer pousado, e não colado. Regra de uso: 0 é o padrão (só fio). 1 é cartão. 2 é o que a mão levanta (hover, menu). 3 é o que cobre a tela (modal, recado flutuante). */ --oss-elev-0: none; --oss-elev-1: 0 1px 2px rgba(13, 26, 16, .04), 0 1px 3px rgba(13, 26, 16, .03); --oss-elev-2: 0 2px 4px rgba(13, 26, 16, .04), 0 8px 24px rgba(13, 26, 16, .07); --oss-elev-3: 0 4px 8px rgba(13, 26, 16, .05), 0 24px 56px rgba(13, 26, 16, .16); /* Os nomes antigos continuam apontando para os novos: nenhuma tela quebra enquanto a migração acontece. */ --oss-sombra-1: var(--oss-elev-1); --oss-sombra-2: var(--oss-elev-2); --oss-sombra-modal: var(--oss-elev-3); /* ── MOVIMENTO ─────────────────────────────────────────────────────────── Lento e elegante, que não é o mesmo que demorado. A curva é o segredo: ela sai depressa e chega devagar, então o movimento parece decidido no começo e assentado no fim — a diferença entre uma porta que bate e uma porta que encosta. Nada tem bounce. Nada acima de 320ms. E nada se move sem motivo: o movimento existe para explicar a mudança, nunca para ser notado. */ --oss-tempo-rapido: 140ms; /* cor de hover, pressão */ --oss-tempo: 220ms; /* o padrão */ --oss-tempo-calmo: 320ms; /* o que entra e sai da tela */ --oss-curva-saida: cubic-bezier(.32, .72, 0, 1); --oss-curva-entrada: cubic-bezier(.4, 0, .2, 1); /* ── FOCO ──────────────────────────────────────────────────────────────── Um anel, o mesmo em todo o sistema, em todo componente, sempre visível. Não se remove outline sem colocar este no lugar. */ --oss-foco-cor: var(--oss-ouro); --oss-foco-largura: 2px; --oss-foco-folga: 2px; --oss-foco: var(--oss-foco-largura) solid var(--oss-foco-cor); /* ── ALVO DE TOQUE ─────────────────────────────────────────────────────── 44px é o mínimo do iOS e não é negociável em nada clicável. */ --oss-toque: 44px; /* ── MEDIDA ────────────────────────────────────────────────────────────── Largura de leitura confortável, e as caixas do sistema. */ --oss-medida: 64ch; /* texto corrido */ --oss-larg-forma: 420px; /* formulário centrado: entrar, convite */ --oss-larg-painel: 760px; /* uma coluna de trabalho */ --oss-larg-app: 1120px; /* app largo: Dojo */ --oss-larg-mesa: 1320px; /* mesa de trabalho com barra lateral: /core */ /* ── GRADE ─────────────────────────────────────────────────────────────── Doze colunas no desktop, quatro no celular, com a mesma calha. Doze porque divide por 2, 3, 4 e 6 — é o que permite meia, terça e quarta largura sem número quebrado. A barra lateral do /core NÃO é uma coluna da grade: ela é casca. A grade começa depois dela, no conteúdo. */ --oss-colunas: 4; --oss-calha: var(--oss-e-4); --oss-lateral: 248px; /* a barra do /core no desktop */ --oss-lateral-min: 72px; /* recolhida: só os ícones */ /* ── ALTURA DE CONTROLE ────────────────────────────────────────────────── Três, e todo controle do sistema usa uma delas. É o que faz botão, campo e select ficarem alinhados quando estão lado a lado — o desalinho de 2px entre um botão e o campo ao lado é a coisa mais visível de um painel amador. */ --oss-ctrl-sm: 36px; --oss-ctrl: 44px; /* também é o alvo mínimo de toque */ --oss-ctrl-lg: 52px; /* ── CAMADAS ───────────────────────────────────────────────────────────── Nomeadas, para ninguém precisar inventar 9999. */ --oss-z-base: 1; --oss-z-fixo: 10; --oss-z-topo: 20; --oss-z-veu: 30; --oss-z-modal: 40; --oss-z-recado: 50; } /* ═══════════════════════════════════════════════════════════════════════════ O CONTRATO DO TEMA ESCURO — preparado, não implementado ═══════════════════════════════════════════════════════════════════════════ O tema escuro NÃO está ligado, e ligá-lo não é decisão de código: é decisão de escola, e precisa de uma passada de contraste medido igual à que esta paleta levou. O que está feito é a preparação, e ela consiste em UMA regra respeitada acima: **nenhum componente nomeia uma cor de marca.** Os tokens estão em duas camadas: MARCA --oss-floresta, --oss-verde, --oss-ouro, --oss-pergaminho as quatro cores que são a Oss Yoga. Não mudam com o tema. SEMÂNTICA --oss-fundo, --oss-carta, --oss-tinta, --oss-fio, --oss-ok… o PAPEL que uma cor cumpre. É esta camada, e só ela, que um tema troca. Os componentes leem exclusivamente a camada semântica. Por isso o tema escuro, no dia em que for decidido, é este bloco — e nada mais no sistema precisa ser tocado: :root[data-tema="escuro"] { --oss-fundo: #0D1A10; --oss-carta: #152218; --oss-carta-2: #1D2C22; --oss-escuro: #0A140C; --oss-tinta: #F5F1E8; --oss-tinta-2: rgba(245,241,232,.74); --oss-tinta-3: rgba(245,241,232,.55); --oss-ouro-tinta: var(--oss-ouro); ← no escuro o ouro puro é legível --oss-fio: rgba(245,241,232,.14); --oss-fio-forte: rgba(245,241,232,.26); --oss-ok-fundo / --oss-atencao-fundo / --oss-erro-fundo: as versões escuras, cada uma medida contra a tinta clara; } Falta, e está escrito aqui para não ser esquecido: medir os dezesseis pares de contraste de novo, decidir a elevação (no escuro, sombra não separa — quem separa é a superfície mais clara), e escolher entre seguir o sistema operacional (prefers-color-scheme) ou dar uma chave à pessoa. Nada disso se resolve escrevendo CSS depressa. */ /* ── QUEM PEDIU MENOS MOVIMENTO RECEBE MENOS ────────────────────────────── Não é acessibilidade decorativa: há gente que passa mal com animação. Zerar os tempos aqui desliga o sistema inteiro de uma vez. */ @media (prefers-reduced-motion: reduce) { :root { --oss-tempo-rapido: 0ms; --oss-tempo: 0ms; --oss-tempo-calmo: 0ms; } }