/* Waka design tokens — light / dark via data-theme on */ /* Theme-agnostic scale (spacing, type, motion, z-index) */ :root { --waka-space-1: 4px; --waka-space-2: 8px; --waka-space-3: 12px; --waka-space-4: 16px; --waka-space-5: 24px; --waka-space-6: 32px; --waka-space-7: 48px; --waka-space-8: 64px; --waka-text-xs: 0.75rem; --waka-text-sm: 0.875rem; --waka-text-base: 1rem; --waka-text-lg: 1.125rem; --waka-text-xl: 1.35rem; --waka-text-2xl: clamp(1.5rem, 2vw, 1.75rem); --waka-leading-tight: 1.25; --waka-leading-normal: 1.5; --waka-weight-medium: 500; --waka-weight-semibold: 600; --waka-brand-size: clamp(1.15rem, 2vw, 1.65rem); --waka-content-max: 1280px; --waka-duration-instant: 80ms; --waka-duration-fast: 140ms; --waka-duration-normal: 200ms; --waka-duration-slow: 320ms; --waka-duration-emphasis: 480ms; --waka-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --waka-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --waka-z-base: 1; --waka-z-dropdown: 100; --waka-z-sticky: 120; --waka-z-modal: 200; --waka-z-toast: 300; --waka-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } :root, [data-theme="dark"] { /* Surfaces */ --waka-bg: #0f1419; --waka-bg-elevated: #151b22; --waka-bg-muted: #1a222c; --waka-bg-hover: #1f2833; --waka-surface: #12181f; --waka-surface-0: #0f1419; --waka-surface-1: #151b22; --waka-surface-2: #1a222c; --waka-surface-3: #243040; --waka-state-hover: rgba(255, 255, 255, 0.06); --waka-state-pressed: rgba(255, 255, 255, 0.1); --waka-state-selected: rgba(201, 162, 39, 0.14); --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 — gold DS (parity WakaHouse / contracts) */ --waka-accent: #c9a227; --waka-accent-dim: rgba(201, 162, 39, 0.14); --waka-accent-strong: #b08920; --waka-accent-text: #1a1714; --waka-accent-glow: rgba(201, 162, 39, 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(232, 184, 109, 0.06); --waka-grad-b: rgba(201, 162, 39, 0.05); --waka-grad-mid: #121820; --waka-grad-deep: #0c1015; --waka-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.22); --waka-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); --waka-shadow-md: var(--waka-shadow); --waka-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45); --waka-focus-ring: 0 0 0 3px rgba(201, 162, 39, 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: var(--waka-ease-out); color-scheme: dark; } [data-theme="light"] { --waka-bg: #f5f7fa; --waka-bg-elevated: #ffffff; --waka-bg-muted: #e7eef4; --waka-bg-hover: #dce5ee; --waka-surface: #ffffff; --waka-surface-0: #f5f7fa; --waka-surface-1: #ffffff; --waka-surface-2: #eef3f7; --waka-surface-3: #e4ebf2; --waka-state-hover: rgba(18, 40, 58, 0.06); --waka-state-pressed: rgba(18, 40, 58, 0.1); --waka-state-selected: rgba(168, 134, 31, 0.14); --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: #a8861f; --waka-accent-dim: rgba(168, 134, 31, 0.12); --waka-accent-strong: #8f7319; --waka-accent-text: #ffffff; --waka-accent-glow: rgba(168, 134, 31, 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(232, 184, 109, 0.12); --waka-grad-b: rgba(168, 134, 31, 0.06); --waka-grad-mid: #eef3f7; --waka-grad-deep: #e4ebf2; --waka-shadow-sm: 0 2px 8px rgba(20, 40, 60, 0.08); --waka-shadow: 0 16px 40px rgba(20, 40, 60, 0.1); --waka-shadow-md: var(--waka-shadow); --waka-shadow-lg: 0 20px 56px rgba(20, 40, 60, 0.14); --waka-focus-ring: 0 0 0 3px rgba(168, 134, 31, 0.28); --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: #f5f7fa; --waka-bg-elevated: #ffffff; --waka-bg-muted: #e7eef4; --waka-bg-hover: #dce5ee; --waka-surface: #ffffff; --waka-surface-0: #f5f7fa; --waka-surface-1: #ffffff; --waka-surface-2: #eef3f7; --waka-surface-3: #e4ebf2; --waka-state-hover: rgba(18, 40, 58, 0.06); --waka-state-pressed: rgba(18, 40, 58, 0.1); --waka-state-selected: rgba(168, 134, 31, 0.14); --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: #a8861f; --waka-accent-dim: rgba(168, 134, 31, 0.12); --waka-accent-strong: #8f7319; --waka-accent-text: #ffffff; --waka-accent-glow: rgba(168, 134, 31, 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(232, 184, 109, 0.12); --waka-grad-b: rgba(168, 134, 31, 0.06); --waka-grad-mid: #eef3f7; --waka-grad-deep: #e4ebf2; --waka-shadow-sm: 0 2px 8px rgba(20, 40, 60, 0.08); --waka-shadow: 0 16px 40px rgba(20, 40, 60, 0.1); --waka-shadow-md: var(--waka-shadow); --waka-shadow-lg: 0 20px 56px rgba(20, 40, 60, 0.14); --waka-focus-ring: 0 0 0 3px rgba(168, 134, 31, 0.28); --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; } }