/* =================================== BLOG – Design Tokens Allen87 | Brand: Navy · Orange · Steel Blue Fontes: KoHo (display) · Josefin Sans (body) · JetBrains Mono (code) Ref: allen_branding.pdf / references 1–6 =================================== */ /* ─── Google Fonts (cobre todos os arquivos que importam este CSS) ─── */ @import url('https://fonts.googleapis.com/css2?family=KoHo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Josefin+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* === BRAND COLORS (allen_branding.pdf · references/2.png) === */ --navy: #283044; /* Allen Navy — estrutura, profundidade */ --steel: #78A1BB; /* Steel Blue — tecnologia, clareza */ --brand-orange: #F28F3B; /* Allen Orange — energia, ação, CTA */ --terracotta: #C8553D; /* Terracota — variante do orange, hover */ --mint: #EBF5EE; /* Mint — fundo light suave */ /* === ACCENT PALETTE (categorias do blog) === */ --cyan: #00D4FF; /* AI / Machine Learning */ --indigo: #818CF8; /* LLM / Modelos */ --emerald: #34D399; /* Data / Engenharia */ --amber: #FBBF24; /* Python / Código */ --rose: #FB7185; /* Carreira */ --violet: #A78BFA; /* Tendências */ --orange: #FF6B35; /* Basquete / Sports energy */ --green: #22C55E; /* Futebol */ /* === DARK THEME (default) === */ --bg: #0C1220; --bg-2: #101828; --bg-card: #162034; --bg-card-h: #1C2A42; --bg-nav: rgba(12, 18, 32, 0.92); --bg-code: #0A1628; --bg-tag: rgba(242, 143, 59, 0.08); --border: rgba(120, 161, 187, 0.10); --border-a: rgba(242, 143, 59, 0.30); --border-card: rgba(120, 161, 187, 0.07); --accent: #F28F3B; /* Allen Orange */ --accent-dim: rgba(242, 143, 59, 0.12); --accent-2: #78A1BB; /* Steel Blue */ --accent-2-dim: rgba(120, 161, 187, 0.12); --text: #F4F6FB; --text-muted: #8EA4B8; --text-dim: #4A5E72; --text-inv: #0C1220; --shadow-sm: 0 2px 8px rgba(0,0,0,0.40); --shadow-md: 0 4px 24px rgba(0,0,0,0.55); --shadow-lg: 0 8px 48px rgba(0,0,0,0.65); --shadow-glow: 0 0 40px rgba(242,143,59,0.08); --shadow-glow-h:0 0 60px rgba(242,143,59,0.20); /* Hero: radial glows — orange e steel blue */ --grad-hero: radial-gradient(ellipse at 20% 60%, rgba(242,143,59,0.07) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(120,161,187,0.06) 0%, transparent 50%), radial-gradient(ellipse at 50% 90%, rgba(40,48,68,0.40) 0%, transparent 60%); /* Gradiente CTA — orange → terracota (botões, progress bar) */ --grad-accent: linear-gradient(135deg, #F28F3B 0%, #C8553D 100%); /* Gradiente texto — orange → steel (gradient text decorativo) */ --grad-text: linear-gradient(135deg, #F28F3B 0%, #78A1BB 55%, #F4F6FB 100%); /* Gradiente acento 2 — steel → navy (bordas, separadores) */ --grad-steel: linear-gradient(135deg, #78A1BB 0%, #283044 100%); /* === TYPOGRAPHY === */ --font-display: 'KoHo', 'Josefin Sans', system-ui, sans-serif; --font-sans: 'Josefin Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --lead-tight: 1.25; --lead-snug: 1.375; --lead-base: 1.65; /* Josefin Sans pede line-height levemente maior */ --lead-relaxed: 1.75; /* === SPACING (8-pt grid) === */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* === RADIUS === */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-full: 9999px; /* === TRANSITIONS === */ --t-fast: 150ms ease; --t-base: 250ms ease; --t-slow: 400ms ease; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* === LAYOUT === */ --max-w: 1200px; --max-w-prose: 740px; --nav-h: 64px; /* === Z-INDEX === */ --z-base: 1; --z-card: 10; --z-progress: 90; --z-nav: 100; --z-overlay: 300; /* === EDITORIAL / MAGAZINE TOKENS === */ --font-serif: 'KoHo', Georgia, serif; /* KoHo substitui Georgia como serif editorial */ --border-rule-h: 2px solid var(--text); --border-accent-l: 3px solid var(--accent); --r-card: 6px; --r-card-sm: 3px; --cover-ratio: 56.25%; /* 16:9 */ --cover-ratio-featured: 42%; /* ~2.4:1 */ /* Cores de categoria */ --cat-ai: #00D4FF; --cat-llm: #818CF8; --cat-data: #34D399; --cat-python: #FBBF24; --cat-career: #FB7185; --cat-soccer: #22C55E; --cat-basketball: #FF6B35; } /* ─── Light theme overrides ─── */ [data-theme="light"] { --bg: #F4F6FB; --bg-2: #EBF5EE; --bg-card: #FFFFFF; --bg-card-h: #F0F6FF; --bg-nav: rgba(244, 246, 251, 0.94); --bg-code: #F1F5F9; --bg-tag: rgba(242, 143, 59, 0.07); --border: rgba(40, 48, 68, 0.08); --border-a: rgba(242, 143, 59, 0.30); --border-card: rgba(40, 48, 68, 0.06); --accent: #E07B25; /* orange ligeiramente mais escuro para contraste */ --accent-dim: rgba(224, 123, 37, 0.10); --accent-2: #5A8BA8; /* steel escurecido */ --accent-2-dim: rgba(90, 139, 168, 0.10); --text: #283044; /* Navy como texto — máximo contraste e branding */ --text-muted: #4A6077; --text-dim: #94A3B8; --text-inv: #FFFFFF; --shadow-sm: 0 2px 8px rgba(40,48,68,0.08); --shadow-md: 0 4px 24px rgba(40,48,68,0.12); --shadow-lg: 0 8px 48px rgba(40,48,68,0.14); --shadow-glow: 0 0 40px rgba(242,143,59,0.06); --shadow-glow-h:0 0 60px rgba(242,143,59,0.14); --grad-hero: radial-gradient(ellipse at 20% 60%, rgba(242,143,59,0.05) 0%, transparent 55%), radial-gradient(ellipse at 80% 20%, rgba(120,161,187,0.05) 0%, transparent 50%); --grad-text: linear-gradient(135deg, #E07B25 0%, #5A8BA8 55%, #283044 100%); --border-rule-h: 2px solid #283044; --cat-ai: #0284C7; --cat-llm: #6366F1; --cat-data: #059669; --cat-python: #D97706; --cat-career: #E11D48; --cat-soccer: #16A34A; --cat-basketball: #EA580C; }