/* CDN77 Tokens */ :root { --cdn-yellow: #FFFB63; --cdn-yellow-soft: #FFFAB4; --cdn-yellow-glow: rgba(255, 251, 99, 0.30); --cdn-yellow-glow-2: rgba(255, 251, 99, 0.15); --cdn-blue: #3976A2; --cdn-blue-deep: #00365C; --cdn-blue-wash: rgba(0, 54, 92, 0.10); --cdn-blue-glow: rgba(57, 118, 162, 0.15); --cdn-ink: #0A0E1F; --cdn-ink-90: rgba(10, 14, 31, 0.90); --cdn-ink-60: rgba(10, 14, 31, 0.60); --cdn-navy: #1E2131; --cdn-slate: #2A3047; --cdn-slate-2: #3A4159; --cdn-slate-3: #4A5565; --cdn-white: #FFFFFF; --cdn-bg: #F5F6F8; --cdn-sand: #F3F1E4; --cdn-sand-2: #F9F6EF; --cdn-stone: #F8F7F5; --cdn-border: #E9E7E3; --cdn-border-2: #EEEEEF; --cdn-text-mute: #C8CBD3; --cdn-success: #3DB462; --cdn-success-bright:#00A551; --cdn-warn: #FF6D5E; --cdn-error: #EF3737; --fg-1: var(--cdn-ink); --fg-2: var(--cdn-slate-2); --fg-3: var(--cdn-text-mute); --fg-on-dark-1: var(--cdn-white); --fg-on-dark-2: var(--cdn-text-mute); --bg-page: var(--cdn-bg); --bg-surface: var(--cdn-white); --bg-surface-soft: var(--cdn-sand-2); --bg-diagram: var(--cdn-sand); --bg-dark: var(--cdn-navy); --bg-dark-deep: var(--cdn-ink); --bg-card-dark: var(--cdn-slate); --border-1: var(--cdn-border); --border-2: var(--cdn-border-2); --accent: var(--cdn-yellow); --accent-ink: var(--cdn-ink); --link: var(--cdn-ink); --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-15: 60px; --s-20: 80px; --s-30: 120px; --shadow-card: none; --shadow-card-hi: 0 2px 4px rgba(10, 14, 31, 0.06), 0 16px 40px rgba(10, 14, 31, 0.10); --shadow-yellow: 0 8px 24px var(--cdn-yellow-glow); --shadow-yellow-sm: 0 4px 12px var(--cdn-yellow-glow-2); --glow-blue: radial-gradient(closest-side, var(--cdn-blue-glow), transparent 70%); --content-w: 1224px; --gutter: 108px; --section-py: 80px; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; } html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================================ App theme — light + dark, layered on top of CDN77 tokens. Toggle via [data-theme="light"|"dark"] on . ============================================================ */ :root, [data-theme="light"] { /* Surfaces */ --bg-app: rgb(245,246,248); /* page background */ --bg-surface: rgb(255,255,255); /* cards, sidebar, topbar */ --bg-surface-2: rgb(249,249,251); /* sub-card / hover wash */ --bg-subtle: rgba(232,233,238,0.30); /* inset rows */ --bg-sand: rgb(243,241,228); /* warm panel */ --bg-canvas: rgb(255,255,255); /* Text */ --fg-strong: rgb(21,23,30); /* headings */ --fg-default: rgb(21,23,30); --fg-muted: rgb(131,132,139); --fg-subtle: rgb(150,151,156); --fg-on-accent: rgb(255,255,255); /* Borders */ --bd-1: rgb(224,225,230); --bd-2: rgb(232,233,238); --bd-strong: rgb(21,23,30); /* Accent */ --accent-1: rgb(59,89,206); /* primary blue */ --accent-1-soft: rgba(59,89,206,0.10); --accent-2: var(--cdn-yellow); /* yellow stays for highlights */ --accent-2-glow: rgba(255,251,99,0.30); /* Effects */ --shadow-1: 0 1px 2px rgba(10,14,31,0.04); --shadow-2: 0 8px 24px rgba(10,14,31,0.08); --shadow-pop: 0 12px 32px rgba(10,14,31,0.12); --ring: 0 0 0 3px rgba(59,89,206,0.18); --radius-card: 16px; --radius-md: 10px; --radius-sm: 8px; --radius-pill: 999px; color-scheme: light; } [data-theme="dark"] { --bg-app: rgb(11,12,15); --bg-surface: rgba(255,255,255,0.04); --bg-surface-2: rgba(255,255,255,0.06); --bg-subtle: rgba(255,255,255,0.03); --bg-sand: rgba(255,251,99,0.04); --bg-canvas: rgba(255,255,255,0.04); --fg-strong: rgb(255,255,255); --fg-default: rgba(255,255,255,0.92); --fg-muted: rgb(131,132,139); --fg-subtle: rgb(150,151,156); --fg-on-accent: rgb(11,12,15); --bd-1: rgba(255,255,255,0.10); --bd-2: rgba(255,255,255,0.06); --bd-strong: rgba(255,255,255,0.40); --accent-1: rgb(103,126,219); --accent-1-soft: rgba(103,126,219,0.16); --accent-2: var(--cdn-yellow); --accent-2-glow: rgba(255,251,99,0.20); --shadow-1: 0 1px 2px rgba(0,0,0,0.40); --shadow-2: 0 8px 24px rgba(0,0,0,0.40); --shadow-pop: 0 12px 40px rgba(0,0,0,0.55); --ring: 0 0 0 3px rgba(103,126,219,0.30); color-scheme: dark; } /* ============================================================ Infographic builder — modern light/dark workspace. ============================================================ */ html, body, #root { height: 100%; margin: 0; } html, body, body[style] { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; } * { box-sizing: border-box; } button { font-family: inherit; } html, body { background: var(--bg-app); color: var(--fg-default); overflow: hidden; -webkit-font-smoothing: antialiased; }