/* ============================================================ aiqbridge — Design Tokens Light mode é o padrão. Dark mode ativa via [data-theme="dark"] no . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root, [data-theme="light"] { /* — Surfaces & ink — */ --bg: #ffffff; --surface: #fafafa; --surface-2: #f5f5f5; --ink: #0a0a0a; --muted: #525252; --line: #e5e5e5; --line-strong: #d4d4d4; /* — Brand — */ --brand: #7B1FA2; --brand-deep: #5A1577; --brand-light: #A855F7; --brand-faint: #FAF5FF; --ink-on-brand: #ffffff; /* — Accent (cyan, code/info) — */ --accent: #06B6D4; /* — Status — */ --success: #16a34a; --warning: #f59e0b; --danger: #dc2626; --info: #2563eb; --success-bg: #f0fdf4; --warning-bg: #fffbeb; --danger-bg: #fef2f2; --info-bg: #eff6ff; /* — Code surface — */ --code-bg: #0a0a0a; --code-ink: #fafafa; /* — Shadows — */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10); /* — Gradient — */ --grad-brand: linear-gradient(135deg, #7B1FA2 0%, #A855F7 100%); } [data-theme="dark"] { --bg: #0B0B12; --surface: #15151F; --surface-2: #1C1C28; --ink: #F5F5F7; --muted: #9CA3AF; --line: #23232E; --line-strong: #2E2E3D; --brand: #A855F7; --brand-deep: #7B1FA2; --brand-light: #C084FC; --brand-faint: #1E1233; --ink-on-brand: #ffffff; --accent: #22D3EE; --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #60a5fa; --success-bg: #052e16; --warning-bg: #422006; --danger-bg: #450a0a; --info-bg: #172554; --code-bg: #000000; --code-ink: #fafafa; /* No dark, sombras quase imperceptíveis — borda em --line carrega o peso */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --grad-brand: linear-gradient(135deg, #A855F7 0%, #22D3EE 100%); } /* ============================================================ Tokens compartilhados (não mudam entre temas) ============================================================ */ :root { /* — Typography — */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace; --font-display: 'Inter', system-ui, sans-serif; --tracking-tight: -0.04em; --tracking-normal: 0; --weight-display: 700; --weight-bold: 700; --weight-medium: 500; --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 */ --text-display: clamp(2.5rem, 5vw + 1rem, 4.5rem); /* hero responsivo */ /* — Spacing — */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* — Radius — */ --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* — Layout — */ --sidebar-w: 248px; --topbar-h: 64px; --container: 1200px; /* — Motion — */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --duration-fast: 120ms; --duration: 200ms; --duration-slow: 400ms; } /* ============================================================ Base ============================================================ */ html { background: var(--bg); color: var(--ink); font-family: var(--font-sans); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } * { box-sizing: border-box; }