/* ───────────────────────────────────────────────────────────────────────────── AI Ads Manager — Design tokens Dark mode (default) + Light mode via [data-theme="light"] on Notion / Linear hybrid aesthetic ───────────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap'); /* ── Dark (default) ─────────────────────────────────────────────────────────── */ :root { /* Surfaces */ --bg: #111113; --card: #18181b; --el: #1f1f23; --input: #242428; /* Borders */ --border: rgba(255,255,255,0.065); --border-hi: rgba(255,255,255,0.11); --border-focus: rgba(139,92,246,0.5); /* Text */ --text: #f4f4f5; --text-2: #a1a1aa; --text-3: #52525b; /* Accent — violet */ --accent: #8b5cf6; --accent-d: #7c3aed; --accent-glow:rgba(139,92,246,0.14); --accent-bg: rgba(139,92,246,0.08); /* Semantic */ --green: #22c55e; --green-bg: rgba(34,197,94,0.08); --red: #ef4444; --red-bg: rgba(239,68,68,0.08); --yellow: #f59e0b; --yellow-bg: rgba(245,158,11,0.08); --blue: #3b82f6; --blue-bg: rgba(59,130,246,0.08); /* Typography */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif; /* Radii */ --r-sm: 6px; --r: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); --shadow: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5); color-scheme: dark; } /* ── Light mode ─────────────────────────────────────────────────────────────── */ html[data-theme="light"] { /* Surfaces */ --bg: #f8f8fa; --card: #ffffff; --el: #f1f1f4; --input: #f4f4f7; /* Borders */ --border: rgba(0,0,0,0.07); --border-hi: rgba(0,0,0,0.11); --border-focus: rgba(124,58,237,0.4); /* Text */ --text: #09090b; --text-2: #6b6b75; --text-3: #a8a8b4; /* Accent */ --accent: #7c3aed; --accent-d: #6d28d9; --accent-glow:rgba(124,58,237,0.1); --accent-bg: rgba(124,58,237,0.06); /* Semantic */ --green: #16a34a; --green-bg: rgba(22,163,74,0.07); --red: #dc2626; --red-bg: rgba(220,38,38,0.07); --yellow: #d97706; --yellow-bg: rgba(217,119,6,0.07); --blue: #2563eb; --blue-bg: rgba(37,99,235,0.07); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); --shadow: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.12); color-scheme: light; } /* ── Base resets ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 14px; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.2s, color 0.2s; } /* Metrics / numbers use tabular nums for alignment */ .metric, .metric-val, [class*="metric"] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ── Theme toggle button ────────────────────────────────────────────────────── */ .theme-toggle { width: 34px; height: 34px; background: var(--el); border: 1px solid var(--border); border-radius: var(--r); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--text-2); transition: all 0.15s; flex-shrink: 0; } .theme-toggle:hover { background: var(--border-hi); color: var(--text); }