/* Waka design tokens — light / dark via data-theme on */ :root, [data-theme="dark"] { /* Surfaces */ --waka-bg: #0f1419; --waka-bg-elevated: #151b22; --waka-bg-muted: #1a222c; --waka-bg-hover: #1f2833; --waka-surface: #12181f; --waka-panel: rgba(18, 24, 31, 0.78); --waka-panel-solid: #161b22; --waka-sidebar: rgba(15, 20, 25, 0.72); --waka-sidebar-solid: rgba(15, 20, 25, 0.88); --waka-overlay: rgba(0, 0, 0, 0.45); --waka-border: rgba(255, 255, 255, 0.08); --waka-border-strong: rgba(255, 255, 255, 0.14); /* Accent */ --waka-accent: #3ddc97; --waka-accent-dim: rgba(61, 220, 151, 0.14); --waka-accent-strong: #2fc482; --waka-accent-text: #0a1210; --waka-accent-glow: rgba(61, 220, 151, 0.08); /* Text */ --waka-text: #e8eef4; --waka-text-muted: #8b9aab; --waka-text-dim: #5c6b7a; /* Semantic */ --waka-danger: #ff6b6b; --waka-danger-dim: rgba(255, 107, 107, 0.14); --waka-danger-text: #1a0a0a; --waka-warning: #f0c14a; --waka-warning-dim: rgba(240, 193, 74, 0.14); --waka-info: #5b9fd4; /* Atmosphere */ --waka-grad-a: rgba(61, 220, 151, 0.08); --waka-grad-b: rgba(91, 159, 212, 0.07); --waka-grad-mid: #121820; --waka-grad-deep: #0c1015; --waka-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); --waka-code-bg: rgba(255, 255, 255, 0.04); --waka-inset: rgba(0, 0, 0, 0.25); --waka-scrub: #ffffff; /* Typography — laconic sans; app layout overrides via next/font */ --waka-font-display: "Outfit", "Manrope", system-ui, sans-serif; --waka-font-body: "Manrope", system-ui, sans-serif; /* Radii & motion */ --waka-radius-sm: 8px; --waka-radius: 14px; --waka-radius-lg: 22px; --waka-ease: cubic-bezier(0.22, 1, 0.36, 1); color-scheme: dark; } [data-theme="light"] { --waka-bg: #f3f6f9; --waka-bg-elevated: #ffffff; --waka-bg-muted: #e7eef4; --waka-bg-hover: #dce5ee; --waka-surface: #ffffff; --waka-panel: rgba(255, 255, 255, 0.88); --waka-panel-solid: #ffffff; --waka-sidebar: rgba(255, 255, 255, 0.82); --waka-sidebar-solid: rgba(255, 255, 255, 0.94); --waka-overlay: rgba(20, 35, 50, 0.35); --waka-border: rgba(18, 40, 58, 0.1); --waka-border-strong: rgba(18, 40, 58, 0.18); --waka-accent: #1fa971; --waka-accent-dim: rgba(31, 169, 113, 0.14); --waka-accent-strong: #178a5c; --waka-accent-text: #ffffff; --waka-accent-glow: rgba(31, 169, 113, 0.1); --waka-text: #15202b; --waka-text-muted: #5a6b7c; --waka-text-dim: #8494a5; --waka-danger: #d94848; --waka-danger-dim: rgba(217, 72, 72, 0.12); --waka-danger-text: #ffffff; --waka-warning: #c48a12; --waka-warning-dim: rgba(196, 138, 18, 0.14); --waka-info: #2f7eb8; --waka-grad-a: rgba(31, 169, 113, 0.1); --waka-grad-b: rgba(47, 126, 184, 0.08); --waka-grad-mid: #eef3f7; --waka-grad-deep: #e4ebf2; --waka-shadow: 0 16px 40px rgba(20, 40, 60, 0.1); --waka-code-bg: rgba(18, 40, 58, 0.06); --waka-inset: rgba(18, 40, 58, 0.06); --waka-scrub: #ffffff; color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]), [data-theme="system"] { --waka-bg: #f3f6f9; --waka-bg-elevated: #ffffff; --waka-bg-muted: #e7eef4; --waka-bg-hover: #dce5ee; --waka-surface: #ffffff; --waka-panel: rgba(255, 255, 255, 0.88); --waka-panel-solid: #ffffff; --waka-sidebar: rgba(255, 255, 255, 0.82); --waka-sidebar-solid: rgba(255, 255, 255, 0.94); --waka-overlay: rgba(20, 35, 50, 0.35); --waka-border: rgba(18, 40, 58, 0.1); --waka-border-strong: rgba(18, 40, 58, 0.18); --waka-accent: #1fa971; --waka-accent-dim: rgba(31, 169, 113, 0.14); --waka-accent-strong: #178a5c; --waka-accent-text: #ffffff; --waka-accent-glow: rgba(31, 169, 113, 0.1); --waka-text: #15202b; --waka-text-muted: #5a6b7c; --waka-text-dim: #8494a5; --waka-danger: #d94848; --waka-danger-dim: rgba(217, 72, 72, 0.12); --waka-danger-text: #ffffff; --waka-warning: #c48a12; --waka-warning-dim: rgba(196, 138, 18, 0.14); --waka-info: #2f7eb8; --waka-grad-a: rgba(31, 169, 113, 0.1); --waka-grad-b: rgba(47, 126, 184, 0.08); --waka-grad-mid: #eef3f7; --waka-grad-deep: #e4ebf2; --waka-shadow: 0 16px 40px rgba(20, 40, 60, 0.1); --waka-code-bg: rgba(18, 40, 58, 0.06); --waka-inset: rgba(18, 40, 58, 0.06); --waka-scrub: #ffffff; color-scheme: light; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="dark"]):not([data-theme="light"]), [data-theme="system"] { color-scheme: dark; } }