/* ========================================================================= Mesa de RPG v2, tokens Lane: artefato de mesa (ficha, manual, fanzine). Cores canonicas dadas pelo Tai, declaradas em OKLCH. Regra dura: o ouro NUNCA e texto sobre superficie clara (2,2:1). ========================================================================= */ :root { /* ---------- 1. Cores canonicas da marca ---------------------------- */ --c-creme: oklch(0.985 0.010 84); /* #fdfaf3, derivado do ouro */ --c-papel: oklch(0.988 0.010 212); /* #f4fdff */ --c-cinza: oklch(0.903 0.006 183); /* #dbe0df */ --c-ouro: oklch(0.736 0.135 75); /* #da9c37 */ --c-malva: oklch(0.505 0.058 348); /* #7e576a */ --c-vinho: oklch(0.386 0.077 357); /* #633144 */ --c-tinta: oklch(0.256 0.023 252); /* #1c242d */ /* ---------- 2. Escalas derivadas ----------------------------------- Mesmo matiz, lightness variando, chroma caindo perto dos extremos. Infraestrutura para hover, foco, borda sutil e modo escuro. */ --ouro-97: oklch(0.970 0.022 80); --ouro-92: oklch(0.920 0.048 78); --ouro-84: oklch(0.840 0.092 76); --ouro-74: oklch(0.736 0.135 75); /* canonica */ --ouro-62: oklch(0.620 0.126 72); --ouro-48: oklch(0.480 0.100 68); --ouro-32: oklch(0.320 0.068 64); --vinho-96: oklch(0.960 0.012 357); --vinho-88: oklch(0.880 0.028 356); --vinho-70: oklch(0.700 0.058 356); --vinho-54: oklch(0.540 0.080 357); --vinho-39: oklch(0.386 0.077 357); /* canonica */ --vinho-30: oklch(0.300 0.062 356); --vinho-21: oklch(0.210 0.044 355); --malva-94: oklch(0.940 0.012 348); --malva-84: oklch(0.840 0.026 348); --malva-68: oklch(0.680 0.046 348); --malva-50: oklch(0.505 0.058 348); /* canonica */ --malva-38: oklch(0.380 0.050 348); --tinta-94: oklch(0.940 0.005 250); --tinta-78: oklch(0.780 0.012 251); --tinta-58: oklch(0.580 0.019 251); --tinta-40: oklch(0.400 0.023 252); --tinta-26: oklch(0.256 0.023 252); /* canonica */ --tinta-18: oklch(0.180 0.019 252); --tinta-12: oklch(0.120 0.015 252); --creme-98: oklch(0.985 0.010 84); /* canonica, o fundo do site */ --creme-96: oklch(0.962 0.014 84); --creme-92: oklch(0.920 0.020 83); /* ---------- 3. Tokens semanticos, modo claro ---------------------- */ --fundo: var(--creme-98); --fundo-sutil: var(--creme-96); --fundo-fundo: var(--creme-92); --fundo-elevado: var(--c-papel); --fundo-inverso: var(--tinta-18); --texto: var(--c-tinta); /* 14,6:1 sobre creme */ --texto-suave: var(--c-malva); /* 5,6:1 sobre creme */ /* Tenue precisa ser especifico por tema: escurece no claro, clareia no escuro. Um valor unico reprova nos dois lados (medido: 3,65 e 4,39). */ --texto-tenue: oklch(0.460 0.022 252); /* rotulo e numero, nunca corpo */ --texto-inverso: var(--c-papel); --regua: var(--c-cinza); --regua-forte: var(--malva-84); --regua-marca: var(--vinho-39); --link: var(--c-vinho); /* 9,4:1 sobre creme */ --link-hover: var(--vinho-30); --marca: var(--c-vinho); --foco: var(--c-vinho); /* Ouro: preenchimento, borda e carimbo. Nunca texto no claro. */ --realce: var(--c-ouro); --realce-suave: var(--ouro-92); --realce-texto: var(--c-tinta); /* 6,6:1 dentro do ouro */ --grade: color-mix(in oklch, var(--c-malva) 12%, transparent); --grao-opacidade: 0.055; --grao-mistura: multiply; /* ---------- 4. Tipografia ------------------------------------------ */ --f-display: "Anybody", "Arial Narrow", system-ui, sans-serif; --f-corpo: "Literata", Georgia, "Times New Roman", serif; --f-rotulo: "Courier Prime", "Courier New", ui-monospace, monospace; /* Escala modular 1.28, fluida nos titulos. */ --t-xs: 0.75rem; /* 12px, rotulo e selo */ --t-sm: 0.875rem; /* 14px, metadado e legenda */ --t-base: 1.1875rem; /* 19px, corpo */ --t-md: 1.375rem; /* 22px, linha fina e olho */ --t-lg: clamp(1.5rem, 1.20rem + 1.2vw, 1.95rem); --t-xl: clamp(1.95rem, 1.40rem + 2.4vw, 2.75rem); --t-2xl: clamp(2.4rem, 1.55rem + 3.9vw, 3.9rem); --t-3xl: clamp(2.9rem, 1.40rem + 6.8vw, 6.5rem); /* manchete de capa */ --entrelinha-corpo: 1.6; --entrelinha-titulo: 0.98; --medida: 68ch; /* Larguras do eixo wdth de Anybody. A elasticidade e a assinatura. */ --wd-comprimido: 72; --wd-normal: 100; --wd-expandido: 125; /* ---------- 5. Espacamento (variado de proposito) ------------------ */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: clamp(3.5rem, 2rem + 5vw, 6rem); --e-9: clamp(5rem, 2.5rem + 8vw, 9rem); --pagina: 1220px; --gutter: clamp(1rem, 0.4rem + 2.4vw, 2.5rem); /* ---------- 6. Movimento ------------------------------------------- */ --ease: cubic-bezier(0.165, 0.84, 0.44, 1); /* ease-out-quart */ --dur-rapida: 120ms; --dur-media: 180ms; --dur-lenta: 240ms; /* ---------- 7. Cores por sistema de RPG ---------------------------- Rotacao de matiz sobre a lightness e o chroma do vinho, para que qualquer sistema novo entre sem sair da familia. */ --sis-dd: oklch(0.386 0.077 30); /* Dungeons & Dragons */ --sis-tormenta: oklch(0.386 0.077 145); /* Tormenta */ --sis-vampiro: oklch(0.386 0.077 357); /* Vampiro: A Mascara */ --sis-ordem: oklch(0.386 0.077 300); /* Ordem Paranormal */ --sis-pathfinder:oklch(0.386 0.077 250); /* Pathfinder */ --sis-cthulhu: oklch(0.386 0.077 185); /* Call of Cthulhu */ --sis-delta: oklch(0.386 0.077 210); /* Delta Green */ --sis-savage: oklch(0.386 0.077 65); /* Savage Worlds */ --sis-critical: oklch(0.386 0.077 330); /* Critical Role */ --sis-discworld: oklch(0.386 0.077 105); /* Discworld */ --sis-noticias: var(--c-vinho); --sis-crowd: oklch(0.386 0.077 90); /* Crowdfunding */ } /* ========================================================================= Modo escuro: a paleta inverte sozinha. Vinho conduz no claro; ouro conduz no escuro (6,6:1 sobre a tinta). ========================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo: var(--tinta-12); --fundo-sutil: var(--tinta-18); --fundo-fundo: oklch(0.220 0.020 252); --fundo-elevado: var(--tinta-18); --fundo-inverso: var(--creme-98); --texto: oklch(0.930 0.008 210); --texto-suave: var(--malva-68); --texto-tenue: oklch(0.640 0.020 251); --texto-inverso: var(--c-tinta); --regua: oklch(0.320 0.018 252); --regua-forte: var(--malva-38); --regua-marca: var(--ouro-62); --link: var(--c-ouro); /* 6,6:1 sobre a tinta */ --link-hover: var(--ouro-84); --marca: var(--c-ouro); --foco: var(--c-ouro); --realce: var(--c-ouro); --realce-suave: var(--ouro-32); --realce-texto: var(--c-tinta); --grade: color-mix(in oklch, var(--c-ouro) 9%, transparent); --grao-opacidade: 0.09; --grao-mistura: screen; --entrelinha-corpo: 1.68; /* tipo claro sobre escuro le mais leve */ } } :root[data-tema="escuro"] { --fundo: var(--tinta-12); --fundo-sutil: var(--tinta-18); --fundo-fundo: oklch(0.220 0.020 252); --fundo-elevado: var(--tinta-18); --fundo-inverso: var(--creme-98); --texto: oklch(0.930 0.008 210); --texto-suave: var(--malva-68); --texto-tenue: oklch(0.640 0.020 251); --texto-inverso: var(--c-tinta); --regua: oklch(0.320 0.018 252); --regua-forte: var(--malva-38); --regua-marca: var(--ouro-62); --link: var(--c-ouro); --link-hover: var(--ouro-84); --marca: var(--c-ouro); --foco: var(--c-ouro); --realce: var(--c-ouro); --realce-suave: var(--ouro-32); --realce-texto: var(--c-tinta); --grade: color-mix(in oklch, var(--c-ouro) 9%, transparent); --grao-opacidade: 0.09; --grao-mistura: screen; --entrelinha-corpo: 1.68; } /* No escuro as cores de sistema precisam clarear para servirem de fundo de capa com texto claro em cima. Mesmo matiz, lightness maior. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --sis-dd: oklch(0.300 0.070 30); --sis-tormenta: oklch(0.300 0.070 145); --sis-vampiro: oklch(0.300 0.070 357); --sis-ordem: oklch(0.300 0.070 300); --sis-pathfinder:oklch(0.300 0.070 250); --sis-cthulhu: oklch(0.300 0.070 185); --sis-delta: oklch(0.300 0.070 210); --sis-savage: oklch(0.300 0.070 65); --sis-critical: oklch(0.300 0.070 330); --sis-discworld: oklch(0.300 0.070 105); --sis-noticias: var(--vinho-30); --sis-crowd: oklch(0.300 0.070 90); } } :root[data-tema="escuro"] { --sis-dd: oklch(0.300 0.070 30); --sis-tormenta: oklch(0.300 0.070 145); --sis-vampiro: oklch(0.300 0.070 357); --sis-ordem: oklch(0.300 0.070 300); --sis-pathfinder:oklch(0.300 0.070 250); --sis-cthulhu: oklch(0.300 0.070 185); --sis-delta: oklch(0.300 0.070 210); --sis-savage: oklch(0.300 0.070 65); --sis-critical: oklch(0.300 0.070 330); --sis-discworld: oklch(0.300 0.070 105); --sis-noticias: var(--vinho-30); --sis-crowd: oklch(0.300 0.070 90); }