/* ========================================================================== JOE REIS DESIGN SYSTEM — TOKENS (v0.1) -------------------------------------------------------------------------- Fonte única de verdade para cor, tipografia, espaço, forma e movimento. Tudo (site, posts, propostas, slides, vídeo) deve nascer daqui. Camadas: 1. Primitivos → --ds-* valores brutos. Nunca usar direto em componentes. 2. Semânticos → --color-* significado ("fundo", "texto", "ação"). É isso que componentes e layouts usam. 3. Temas → [data-theme="dark" | "light"] trocam só os semânticos. Compatibilidade: os nomes --color-bg, --color-fg, --color-primary, --color-accent, --radius*, --font-* são os mesmos do site joereis.com.br. ========================================================================== */ /* Fontes (uma só linha serve para todos os projetos) */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap"); :root { /* ------------------------------------------------------------------------ 1. PRIMITIVOS ------------------------------------------------------------------------ */ /* Marca — as 5 cores oficiais (do arquivo de cores de seleção) */ --ds-ink: #111111; /* preto da marca */ --ds-paper: #F2F0EA; /* off-white quente */ --ds-blue: #2764FF; /* azul primário */ --ds-lime: #C8FF00; /* verde-limão de destaque */ --ds-gray: #707070; /* cinza neutro */ /* Derivados do azul (acessibilidade — ver guia, seção Cores) */ --ds-blue-300: #7AA2FF; /* azul para TEXTO sobre fundo escuro (7.6:1 no ink) */ --ds-blue-600: #2255E5; /* azul para BOTÃO/TEXTO sobre claro (5.3:1 no paper) */ /* Derivados do preto (superfícies do tema escuro; iguais ao site) */ --ds-ink-800: #1C1C1C; /* superfície elevada 1 */ --ds-ink-700: #262626; /* superfície elevada 2 */ --ds-ink-muted: #A3A3A3; /* texto secundário no escuro (7.5:1) */ /* Derivados do off-white (superfícies do tema claro) */ --ds-paper-200: #E8E5DC; /* superfície elevada no claro */ --ds-paper-300: #D9D6CB; /* bordas / divisórias no claro */ --ds-ink-soft: #5C5C5C; /* texto secundário no claro (5.9:1) */ /* Ilustração — azul-marinho dos ícones de objetos (amostrado do arquivo) */ --ds-navy: #10243C; /* Tipografia */ --font-heading: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace; /* Escala tipográfica (razão ~1.25, em rem; 1rem = 16px) */ --text-2xs: 0.6875rem; /* 11 — badges e legendas mono */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-md: 1rem; /* 16 — texto base */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 — título de bloco */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 */ --text-4xl: 3rem; /* 48 */ --text-5xl: 4rem; /* 64 — display */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-base: 1.5; --tracking-tight: -0.02em; --tracking-wide: 0.06em; /* usado em texto mono maiúsculo */ /* Espaçamento — base de 4px */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-block: clamp(2.5rem, 6vw, 4rem); /* respiro entre seções */ /* Forma */ --radius-sm: 0.5rem; /* 8 — foco, itens pequenos */ --radius: 0.75rem; /* 12 — botões, inputs, stats */ --radius-lg: 1.25rem; /* 20 — cards, modais */ --radius-pill: 999px; /* badges, chips */ --border-width: 1px; /* Layout */ --content-width: 640px; /* coluna única, estilo link-na-bio */ --container-wide: 1120px; /* sites e documentos amplos */ /* Movimento */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entradas, hovers (assinatura) */ --ease-standard: ease; --duration-fast: 150ms; /* botões, ícones */ --duration-base: 300ms; /* cards, bordas */ --duration-slow: 600ms; /* revelações de entrada */ /* Camadas */ --z-sticky: 90; --z-modal: 100; --z-skip: 200; /* ------------------------------------------------------------------------ 2. SEMÂNTICOS (padrão = tema escuro, como o site) ------------------------------------------------------------------------ */ --color-bg: var(--ds-ink); --color-bg-elevated: var(--ds-ink-800); --color-bg-elevated-2: var(--ds-ink-700); --color-fg: var(--ds-paper); --color-fg-muted: var(--ds-ink-muted); --color-border: rgb(112 112 112 / 0.28); --color-border-strong: rgb(112 112 112 / 0.45); --color-primary: var(--ds-blue); /* superfícies grandes, gráficos */ --color-primary-foreground: var(--ds-paper); --color-action: var(--ds-blue-600); /* botões (texto claro ≥ 4.5:1) */ --color-link: var(--ds-blue-300); /* links/texto azul */ --color-accent: var(--ds-lime); /* destaque: dados, foco, estado ativo */ --color-accent-foreground: var(--ds-ink); /* SEMPRE preto sobre limão */ --color-focus: var(--ds-lime); --color-illustration: var(--ds-paper); /* traço das ilustrações no escuro */ /* Cor das ilustrações em SVG quando o arquivo é colocado INLINE na página. (Em o SVG usa a cor-padrão gravada nele: #111111 / #10243C.) */ --ds-line-color: var(--ds-paper); /* personagens */ --ds-icon-color: var(--ds-paper); /* ícones de objetos */ /* Sombras (azul = ação, preto = elevação) */ --shadow-action: 0 16px 42px -18px rgb(39 100 255 / 0.72); --shadow-card: 0 12px 32px -20px rgb(0 0 0 / 0.6); --shadow-card-hover: 0 36px 64px -22px rgb(0 0 0 / 0.65), 0 14px 32px -16px rgb(39 100 255 / 0.3); /* Brilho verde girando na borda (efeito de assinatura) */ --glow-clear: rgb(200 255 0 / 0); --glow-soft: rgb(200 255 0 / 0.35); } /* ========================================================================== 3. TEMAS ========================================================================== */ /* O tema escuro é o padrão em :root; este bloco repete os valores para que um trecho escuro funcione DENTRO de uma página clara (ex.: slide escuro num guia claro). */ [data-theme="dark"] { color-scheme: dark; --color-bg: var(--ds-ink); --color-bg-elevated: var(--ds-ink-800); --color-bg-elevated-2: var(--ds-ink-700); --color-fg: var(--ds-paper); --color-fg-muted: var(--ds-ink-muted); --color-border: rgb(112 112 112 / 0.28); --color-border-strong: rgb(112 112 112 / 0.45); --color-link: var(--ds-blue-300); --color-focus: var(--ds-lime); --color-illustration: var(--ds-paper); --ds-line-color: var(--ds-paper); --ds-icon-color: var(--ds-paper); --shadow-card: 0 12px 32px -20px rgb(0 0 0 / 0.6); --shadow-card-hover: 0 36px 64px -22px rgb(0 0 0 / 0.65), 0 14px 32px -16px rgb(39 100 255 / 0.3); } /* Tema "impacto": fundo azul da marca. Para capas, citações e peças de grande impacto. Texto sempre grande/negrito (paper sobre #2764FF = 4.2:1). */ [data-theme="blue"] { color-scheme: dark; --color-bg: var(--ds-blue); --color-bg-elevated: #1F55D6; --color-bg-elevated-2: #1B4BC0; --color-fg: var(--ds-paper); --color-fg-muted: rgb(242 240 234 / 0.82); --color-border: rgb(242 240 234 / 0.28); --color-border-strong: rgb(242 240 234 / 0.5); --color-link: var(--ds-paper); --color-focus: var(--ds-lime); --color-illustration: var(--ds-paper); --ds-line-color: var(--ds-paper); --ds-icon-color: var(--ds-paper); } [data-theme="light"] { color-scheme: light; --color-bg: var(--ds-paper); --color-bg-elevated: #FFFFFF; --color-bg-elevated-2: var(--ds-paper-200); --color-fg: var(--ds-ink); --color-fg-muted: var(--ds-ink-soft); --color-border: rgb(17 17 17 / 0.14); --color-border-strong: rgb(17 17 17 / 0.3); --color-primary-foreground: var(--ds-paper); --color-link: var(--ds-blue-600); /* Limão não tem contraste como TEXTO sobre claro (1.04:1): use como fundo de marcador/destaque com texto preto por cima. */ --color-focus: var(--ds-blue-600); --color-illustration: var(--ds-ink); --ds-line-color: var(--ds-ink); --ds-icon-color: var(--ds-navy); --shadow-card: 0 12px 32px -20px rgb(17 17 17 / 0.25); --shadow-card-hover: 0 30px 56px -24px rgb(17 17 17 / 0.3), 0 14px 32px -16px rgb(39 100 255 / 0.25); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0.01ms; --duration-base: 0.01ms; --duration-slow: 0.01ms; } }