/* ============================================================ João Roque. · Design Tokens · v1.0 · Julho 2026 ------------------------------------------------------------ Decisão consolidada: · Modo claro (principal) = Caminho 1 · Híbrido Editorial · Modo escuro = cores do Caminho 2 · Frosted Lab · Bordô é a cor de destaque da marca nos dois modos (o papel que o dourado cumpre em marcas clássicas). · A marca (wordmark Mix A), a tipografia e o layout NÃO mudam entre temas — só o clima muda. Uso: força o escuro, data-theme="light" força o claro, sem atributo segue o sistema (prefers-color-scheme). ============================================================ */ :root { /* ---------- PRIMITIVOS · escala bordô ---------- */ --bordo-50: #FBF1F2; --bordo-100: #F5DCDE; --bordo-200: #EAB5B9; --bordo-300: #D88087; --bordo-400: #BC5862; --bordo-500: #973A45; --bordo-600: #7A2932; --bordo-700: #5A1F24; --bordo-800: #4A1A1F; --bordo-900: #3D1418; /* ← o bordô da marca */ --bordo-950: #2A0E11; /* ---------- PRIMITIVOS · neutros claros (Caminho 1) ---------- */ --paper: #FBF7F0; /* papel quente, fundo principal */ --areia: #F3EDE0; /* fundo alternativo de seção */ --branco: #FFFFFF; /* superfície de card */ --tinta: #14110F; /* texto principal */ --tinta-soft: #2A2522; /* texto secundário */ --cinza: #6B6359; /* texto apagado / metadados */ --linha: #D8D2C4; /* bordas e divisores */ /* ---------- PRIMITIVOS · escuros (Caminho 2) ---------- */ --midnight: #0C0A14; /* fundo principal dark, nunca preto puro */ --midnight-soft: #14111C; /* fundo alternativo dark */ --midnight-elev: #1A1626; /* superfície elevada dark */ --bone: #E6DDC9; /* texto principal dark */ --bone-strong: #F1ECE2; /* títulos dark */ /* ---------- PRIMITIVOS · acentos ---------- */ --clay: #C66E48; /* terracota: só em gradients e display grande */ --violeta: #4A3370; /* só no dark: glow, hover, gradient. Nunca texto/fundo extenso */ /* ---------- TIPOGRAFIA ---------- */ --font-display: 'Alkes', 'Alegreya', Georgia, serif; /* títulos, "João", editorial */ --font-sans: 'Space Grotesk', 'Inter', sans-serif; /* "Roque", UI, botões, nav */ --font-mono: 'JetBrains Mono', 'SF Mono', monospace; /* labels, metadados, código */ --peso-display: 600; /* Alkes SemiBold: peso oficial do wordmark e títulos */ --peso-sans: 500; /* Space Grotesk Medium: peso oficial de UI */ /* Escala de tipo (fluida) */ --tipo-hero: clamp(2.8rem, 7vw, 6rem); --tipo-h1: clamp(2.4rem, 5vw, 4.2rem); --tipo-h2: clamp(1.8rem, 3.4vw, 2.8rem); --tipo-h3: clamp(1.3rem, 2.2vw, 1.7rem); --tipo-lede: clamp(1.15rem, 1.6vw, 1.4rem); --tipo-corpo: 1rem; --tipo-small: 0.875rem; --tipo-mono: 0.74rem; --tracking-display: -0.022em; --tracking-roque: -0.04em; /* "Roque" em Space Grotesk fecha mais */ --tracking-mono: 0.14em; /* ---------- GEOMETRIA ---------- */ --radius-s: 8px; --radius-m: 14px; --radius-l: 18px; --radius-pill: 100px; /* ---------- MOVIMENTO ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-suave: cubic-bezier(0.4, 0, 0.2, 1); --dur-micro: 0.3s; /* hover, foco */ --dur-entrada: 0.8s; /* fade-up de seção */ --dur-ambiente: 24s; /* aurora drift */ /* ============================================================ SEMÂNTICOS · MODO CLARO (principal · Caminho 1) ============================================================ */ --bg: var(--paper); --bg-alt: var(--areia); --surface: var(--branco); --surface-2: rgba(255, 255, 255, 0.55); /* card translúcido sobre papel */ --text: var(--tinta); --text-2: var(--tinta-soft); --muted: var(--cinza); --line: var(--linha); --accent: var(--bordo-900); /* ponto final, CTAs, links, palavras-chave */ --accent-hover: var(--bordo-950); --accent-label: var(--bordo-700); /* small caps, labels mono (10.4:1 no papel) */ --accent-soft: var(--bordo-100); /* fundos de tag, hover suave */ /* Gradient de texto (uma frase-âncora por página) */ --grad-text: linear-gradient(135deg, var(--bordo-700), var(--clay) 50%, var(--bordo-500)); /* Linha viva (divisores de destaque) */ --grad-line: linear-gradient(90deg, transparent, var(--bordo-700) 30%, var(--clay) 50%, var(--bordo-700) 70%, transparent); /* Botões */ --btn-bg: var(--bordo-900); --btn-text: var(--paper); --btn-ghost-border: var(--linha); /* Fundos dinâmicos */ --aurora-a: var(--bordo-300); /* blob primário */ --aurora-b: var(--clay); /* blob secundário */ --aurora-opacity: 0.35; --net-line: rgba(90, 31, 36, 0.14); /* malha de conexões */ --net-node: rgba(90, 31, 36, 0.45); --dot-grid: rgba(20, 17, 15, 0.06); /* Sombra de card */ --shadow-card: 0 1px 2px rgba(20, 17, 15, 0.04), 0 12px 32px rgba(61, 20, 24, 0.07); --glass-bg: rgba(255, 255, 255, 0.5); --glass-border: var(--linha); --glass-shadow: var(--shadow-card); color-scheme: light; } /* ============================================================ SEMÂNTICOS · MODO ESCURO (cores do Caminho 2 · Frosted Lab) ============================================================ */ [data-theme="dark"] { --bg: var(--midnight); --bg-alt: var(--midnight-soft); --surface: var(--midnight-elev); --surface-2: rgba(186, 214, 247, 0.04); /* frosted glass */ --text: var(--bone); --text-2: rgba(230, 221, 201, 0.85); --muted: rgba(216, 210, 196, 0.6); --line: rgba(216, 210, 196, 0.15); --accent: var(--bordo-400); /* ponto e destaques (4.4:1 — usar grande) */ --accent-hover: var(--bordo-300); --accent-label: var(--bordo-300); /* labels pequenos precisam do 300 (6.9:1) */ --accent-soft: rgba(188, 88, 98, 0.14); --grad-text: linear-gradient(135deg, var(--bordo-300), var(--clay) 50%, var(--bordo-400)); --grad-line: linear-gradient(90deg, transparent, var(--bordo-400) 35%, var(--violeta) 65%, transparent); --btn-bg: rgba(186, 215, 247, 0.06); /* pill frosted do Caminho 2 */ --btn-text: var(--bone); --btn-ghost-border: rgba(186, 215, 247, 0.15); --aurora-a: var(--bordo-700); --aurora-b: var(--violeta); --aurora-opacity: 0.45; --net-line: rgba(186, 215, 247, 0.12); --net-node: rgba(188, 88, 98, 0.7); --dot-grid: rgba(230, 221, 201, 0.05); --shadow-card: rgba(0, 0, 0, 0.4) 0px 16px 32px 0px; --glass-bg: rgba(186, 214, 247, 0.03); --glass-border: rgba(186, 215, 247, 0.08); --glass-shadow: inset rgba(216, 236, 248, 0.12) 0px 1px 1px 0px, inset rgba(186, 215, 247, 0.05) 0px 24px 48px 0px, rgba(0, 0, 0, 0.4) 0px 16px 32px 0px; color-scheme: dark; } /* Sem data-theme definido → segue o sistema */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: var(--midnight); --bg-alt: var(--midnight-soft); --surface: var(--midnight-elev); --surface-2: rgba(186, 214, 247, 0.04); --text: var(--bone); --text-2: rgba(230, 221, 201, 0.85); --muted: rgba(216, 210, 196, 0.6); --line: rgba(216, 210, 196, 0.15); --accent: var(--bordo-400); --accent-hover: var(--bordo-300); --accent-label: var(--bordo-300); --accent-soft: rgba(188, 88, 98, 0.14); --grad-text: linear-gradient(135deg, var(--bordo-300), var(--clay) 50%, var(--bordo-400)); --grad-line: linear-gradient(90deg, transparent, var(--bordo-400) 35%, var(--violeta) 65%, transparent); --btn-bg: rgba(186, 215, 247, 0.06); --btn-text: var(--bone); --btn-ghost-border: rgba(186, 215, 247, 0.15); --aurora-a: var(--bordo-700); --aurora-b: var(--violeta); --aurora-opacity: 0.45; --net-line: rgba(186, 215, 247, 0.12); --net-node: rgba(188, 88, 98, 0.7); --dot-grid: rgba(230, 221, 201, 0.05); --shadow-card: rgba(0, 0, 0, 0.4) 0px 16px 32px 0px; --glass-bg: rgba(186, 214, 247, 0.03); --glass-border: rgba(186, 215, 247, 0.08); --glass-shadow: inset rgba(216, 236, 248, 0.12) 0px 1px 1px 0px, inset rgba(186, 215, 247, 0.05) 0px 24px 48px 0px, rgba(0, 0, 0, 0.4) 0px 16px 32px 0px; color-scheme: dark; } } /* ============================================================ COMPONENTES BASE (opcionais, prontos para reuso) ============================================================ */ /* Wordmark · Mix A (o mesmo nos dois temas) */ .jr-wordmark { display: inline-flex; align-items: baseline; line-height: 1; letter-spacing: var(--tracking-display); color: var(--text); white-space: nowrap; } .jr-wordmark .joao { font-family: var(--font-display); font-weight: var(--peso-display); } .jr-wordmark .roque { font-family: var(--font-sans); font-weight: var(--peso-sans); letter-spacing: var(--tracking-roque); } .jr-wordmark .ponto { color: var(--accent); font-family: var(--font-sans); font-weight: var(--peso-sans); } /* Botão primário */ .jr-btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; background: var(--btn-bg); color: var(--btn-text); border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-sans); font-weight: 500; font-size: 0.92rem; cursor: pointer; text-decoration: none; transition: background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); } .jr-btn:hover { background: var(--accent-hover); transform: translateY(-1px); } [data-theme="dark"] .jr-btn, :root:not([data-theme="light"]) .jr-btn { backdrop-filter: blur(10px); } [data-theme="dark"] .jr-btn { border-color: var(--btn-ghost-border); } [data-theme="dark"] .jr-btn:hover { background: rgba(186, 215, 247, 0.1); } /* Label mono (small caps) */ .jr-label { font-family: var(--font-mono); font-size: var(--tipo-mono); text-transform: uppercase; letter-spacing: var(--tracking-mono); color: var(--accent-label); font-weight: 500; } /* Gradient text (uma frase-âncora por página) */ .jr-grad { background: var(--grad-text); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: jr-grad-shift 6s ease-in-out infinite; } @keyframes jr-grad-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Card frosted (herda o clima do tema) */ .jr-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-l); box-shadow: var(--glass-shadow); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } @media (prefers-reduced-motion: reduce) { .jr-grad { animation: none; } .jr-btn { transition: none; } }