/* OpenClaw Control UI theme tokens (openclaw v2026.9.6, MIT): the base set plus Knot, dark and light. Generated from ui/src/styles/base.css and ui/public/themes/*.css. The site sets data-theme and data-theme-mode on (see site-head.html). */ :root { --bg: #0e1015; --bg-accent: #13151b; --bg-elevated: #191c24; --bg-hover: #1f2330; --bg-muted: #1f2330; --card: #161920; --card-foreground: #f0f0f2; --card-highlight: rgba(255, 255, 255, 0.04); --popover: #191c24; --popover-foreground: #f0f0f2; --session-hovercard-surface: color-mix(in srgb, var(--card) 94%, black 6%); --session-hovercard-progress-surface: color-mix(in srgb, var(--card) 58%, var(--bg) 42%); --panel: #0e1015; --panel-strong: #191c24; --panel-hover: #1f2330; --chrome: rgba(14, 16, 21, 0.96); --chrome-strong: rgba(14, 16, 21, 0.98); --text: #bcbcc0; --text-strong: #f4f4f5; --chat-text: #bcbcc0; --muted: #8b8b94; --muted-strong: #898990; --muted-foreground: #8b8b94; --file-icon-glyph: #a3a3a3; --border: #1e2028; --border-strong: #2e3040; --border-hover: #3e4050; --input: #1e2028; --ring: #ff5c5c; --rail-header-height: 48px; --rail-header-padding-start: 12px; --rail-header-padding-end: 8px; --rail-header-action-size: 28px; --rail-header-action-glyph-size: 16px; --rail-header-action-color: var(--muted); --rail-header-action-hover-color: var(--text); --rail-header-action-active-color: var(--accent); --rail-header-action-disabled-opacity: 0.4; --rail-header-action-gap: 2px; --rail-header-copy-gap: 2px; --rail-header-background: var(--bg); --rail-header-eyebrow-size: var(--control-ui-text-xs); --rail-header-eyebrow-letter-spacing: 0.04em; --rail-header-title-size: var(--control-ui-text-sm); --rail-header-title-weight: 600; --rail-divider-color: var(--border); --rail-divider-size: 1px; --resize-handle-size: 6px; --resize-handle-line-size: 1px; --resize-handle-active-line-size: 2px; --resize-handle-rest-color: color-mix(in srgb, var(--border) 74%, transparent); --resize-handle-active-color: color-mix(in srgb, var(--text) 42%, transparent); --accent: #ff5c5c; --accent-hover: #ff7070; --accent-muted: #ff5c5c; --accent-subtle: rgba(255, 92, 92, 0.1); --accent-foreground: #fafafa; --accent-glow: rgba(255, 92, 92, 0.2); --inbox-attention: #e5243b; --inbox-attention-hover: color-mix(in srgb, var(--inbox-attention) 88%, black); --inbox-attention-foreground: #ffffff; --lobster-icon-body: #ff6d5a; --lobster-icon-shade: #c2372b; --lobster-icon-eye: #050810; --link: color-mix(in srgb, var(--accent-hover) 85%, var(--text)); --link-hover: color-mix(in srgb, var(--link) 82%, var(--text)); --selection-bg: #005fcc; --selection-fg: #ffffff; --primary: #d13c3c; --primary-hover: #c22e2e; --primary-foreground: #ffffff; --secondary: #161920; --secondary-foreground: #f0f0f2; --accent-2: #14b8a6; --accent-2-muted: rgba(20, 184, 166, 0.7); --accent-2-subtle: rgba(20, 184, 166, 0.1); --task-suggestion-action-fg: #fafafa; --button-icon-bg: #ffffff; --brand-logo-chip-bg: #ffffff; --qr-bg: #ffffff; --qr-text: #444444; --media-bg: #000000; --media-foreground: #ffffff; --exec-highlight: #f97316; --moon-highlight: #fef3c7; --moon-base: #fbbf24; --brand-codex: #10a37f; --brand-claude: #d97757; --brand-google: #4285f4; --session-color-red: #f07878; --session-color-blue: #72a7ed; --session-color-green: #69bf8a; --session-color-yellow: #dcc365; --session-color-purple: #b595e8; --session-color-orange: #eaa36a; --session-color-pink: #df8cb9; --session-color-cyan: #66bccb; --control-ui-environment-teal: #14b8a6; --control-ui-environment-teal-ink: #5eead4; --control-ui-environment-amber: #f59e0b; --control-ui-environment-amber-ink: #fcd34d; --control-ui-environment-purple: #a855f7; --control-ui-environment-purple-ink: #d8b4fe; --control-ui-environment-coral: #fb7185; --control-ui-environment-coral-ink: #fda4af; --control-ui-environment-pink: #ec4899; --control-ui-environment-pink-ink: #f9a8d4; --control-ui-environment-blue: #3b82f6; --control-ui-environment-blue-ink: #93c5fd; --control-ui-environment-green: #22c55e; --control-ui-environment-green-ink: #86efac; --control-ui-environment-red: #ef4444; --control-ui-environment-red-ink: #fca5a5; --control-ui-environment-gray: #94a3b8; --control-ui-environment-gray-ink: #cbd5e1; --ok: #22c55e; --ok-muted: rgba(34, 197, 94, 0.75); --ok-subtle: rgba(34, 197, 94, 0.08); --destructive: #ef4444; --destructive-foreground: #fafafa; --warn: #f59e0b; --warn-muted: rgba(245, 158, 11, 0.75); --warn-subtle: rgba(245, 158, 11, 0.08); --danger: #f87171; --danger-muted: rgba(248, 113, 113, 0.75); --danger-subtle: rgba(248, 113, 113, 0.08); --info: #60a5fa; --info-subtle: rgba(96, 165, 250, 0.08); --warn-bright: #f59e0b; --warn-strong: #d97706; --danger-solid-hover: #dc2626; --pr-merged: #a78bfa; --focus: rgba(255, 92, 92, 0.2); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ring) 80%, transparent); --focus-glow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ring), 0 0 16px var(--accent-glow); --grid-line: rgba(255, 255, 255, 0.03); --hljs-keyword: #ff8a80; --hljs-number: #79c0ff; --hljs-string: #a5d6ff; --hljs-title: #d2a8ff; --hljs-type: #ffa657; --hljs-attribute: #7ee787; --hljs-meta: #c9d1d9; --hljs-deletion: #ffa198; --hljs-addition: #7ee787; --theme-switch-x: 50%; --theme-switch-y: 50%; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; --font-shortcut: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", sans-serif; --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-body); --font-chat: var(--font-body); --control-ui-text-scale: 1; --control-ui-text-xs: calc(11px * var(--control-ui-text-scale)); --control-ui-text-sm: calc(12px * var(--control-ui-text-scale)); --control-ui-text-md: calc(14px * var(--control-ui-text-scale)); --control-ui-text-lg: calc(16px * var(--control-ui-text-scale)); --control-ui-input-text-size: max(16px, calc(14px * var(--control-ui-text-scale))); --chat-text-size: var(--control-ui-text-md); --chat-block-gap: var(--chat-text-size); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 24px var(--accent-glow); --overlay-border: color-mix(in srgb, var(--border-strong) 64%, transparent); --overlay-shadow: 0 1px 2px rgb(0 0 0 / 0.18), 0 8px 24px rgb(0 0 0 / 0.24); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --chat-mobile-edge-inset: var(--space-3); --widget-frame-inset: var(--space-3); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; --radius: 10px; --scrollbar-size: 12px; --scrollbar-thumb-inset: 3px; --scrollbar-thumb: color-mix(in srgb, var(--muted) 32%, transparent); --scrollbar-thumb-hover: color-mix(in srgb, var(--muted) 64%, transparent); --openclaw-corner-radius-scale: 1; --chat-composer-corner-shape: superellipse(1.5); --menu-radius: var(--radius-md); --menu-item-radius: var(--radius-sm); --menu-item-height: 28px; --menu-padding: 4px; --menu-selected: color-mix(in srgb, var(--text) 8%, transparent); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 100ms; --duration-normal: 180ms; --duration-slow: 300ms; --cursor-action: default; --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-right: env(safe-area-inset-right, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --z-dropdown: 100; --z-toast: 2000; --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); } :root[data-theme-mode="light"] { --bg: #faf9f7; --bg-accent: #f4f1ec; --bg-elevated: #ffffff; --bg-hover: #efebe4; --bg-muted: #efebe4; --bg-content: #f4f1ec; --card: #ffffff; --card-foreground: #211e1a; --card-highlight: rgba(60, 42, 24, 0.03); --popover: #ffffff; --popover-foreground: #211e1a; --session-hovercard-surface: var(--card); --session-hovercard-progress-surface: color-mix( in srgb, var(--card) 54%, var(--panel-strong) 46% ); --panel: #faf9f7; --panel-strong: #f4f1ec; --panel-hover: #e9e4dc; --chrome: rgba(250, 249, 247, 0.96); --chrome-strong: rgba(250, 249, 247, 0.98); --text: #403c35; --text-strong: #211e1a; --chat-text: #403c35; --muted: #6e6960; --muted-strong: #56524a; --muted-foreground: #6e6960; --file-icon-glyph: #737373; --border: #e8e4dc; --border-strong: #d6d0c5; --border-hover: #b4ac9e; --input: #e8e4dc; --ring: #bd4531; --accent: #bd4531; --accent-hover: #a83c29; --accent-muted: #bd4531; --accent-subtle: rgba(189, 69, 49, 0.08); --accent-foreground: #ffffff; --accent-glow: rgba(189, 69, 49, 0.12); --primary: #bd4531; --primary-foreground: #ffffff; --lobster-icon-body: #ff4d4d; --lobster-icon-shade: #991b1b; --lobster-icon-eye: #050810; --secondary: #f4f1ec; --secondary-foreground: #403c35; --accent-2: #0d9488; --accent-2-muted: rgba(13, 148, 136, 0.75); --accent-2-subtle: rgba(13, 148, 136, 0.08); --session-color-red: #c74646; --session-color-blue: #376fbd; --session-color-green: #328452; --session-color-yellow: #9a791b; --session-color-purple: #8652ba; --session-color-orange: #bb681f; --session-color-pink: #b34885; --session-color-cyan: #258394; --control-ui-environment-teal-ink: #115e59; --control-ui-environment-amber-ink: #92400e; --control-ui-environment-purple-ink: #6b21a8; --control-ui-environment-coral-ink: #9f1239; --control-ui-environment-pink-ink: #9d174d; --control-ui-environment-blue-ink: #1e40af; --control-ui-environment-green-ink: #166534; --control-ui-environment-red-ink: #991b1b; --control-ui-environment-gray-ink: #334155; --ok: #166534; --ok-muted: rgba(22, 101, 52, 0.75); --ok-subtle: rgba(22, 101, 52, 0.08); --destructive: #dc2626; --destructive-foreground: #fafafa; --warn: #92400e; --warn-muted: rgba(146, 64, 14, 0.75); --warn-subtle: rgba(146, 64, 14, 0.08); --danger: #b91c1c; --danger-muted: rgba(185, 28, 28, 0.75); --danger-subtle: rgba(185, 28, 28, 0.08); --info: #1d4ed8; --info-subtle: rgba(29, 78, 216, 0.08); --pr-merged: #7c3aed; --focus: rgba(189, 69, 49, 0.15); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ring) 70%, transparent); --focus-glow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ring), 0 0 12px var(--accent-glow); --grid-line: rgba(60, 42, 24, 0.05); --hljs-keyword: #cf222e; --hljs-number: #0550ae; --hljs-string: #0a3069; --hljs-title: #8250df; --hljs-type: #953800; --hljs-attribute: #116329; --hljs-meta: #57606a; --hljs-deletion: #a40e26; --hljs-addition: #116329; --shadow-sm: 0 1px 2px rgba(60, 42, 24, 0.05); --shadow-md: 0 4px 12px rgba(60, 42, 24, 0.07); --shadow-lg: 0 12px 28px rgba(60, 42, 24, 0.09); --shadow-xl: 0 24px 48px rgba(60, 42, 24, 0.11); --shadow-glow: 0 0 20px var(--accent-glow); --overlay-border: color-mix(in srgb, var(--border-strong) 64%, transparent); --overlay-shadow: 0 1px 2px rgb(60 42 24 / 0.035), 0 8px 24px rgb(60 42 24 / 0.065); --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); } :root[data-theme="openknot"] { --ring: #e5243b; --accent: #e5243b; --accent-hover: #f03e52; --accent-muted: #e5243b; --accent-subtle: rgba(229, 36, 59, 0.12); --accent-glow: rgba(229, 36, 59, 0.24); --primary: #d92a3f; --primary-hover: #c22537; --primary-foreground: #fafafa; --destructive: #d32f2f; --destructive-hover: #bc2a2a; --focus: rgba(229, 36, 59, 0.2); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--ring) 70%, transparent); --bg: #080808; --bg-accent: #0d0d0f; --bg-elevated: #141416; --bg-hover: #1a1a1e; --bg-muted: #1a1a1e; --card: #111113; --card-highlight: rgba(255, 255, 255, 0.03); --popover: #141416; --panel: #080808; --panel-strong: #141416; --panel-hover: #1a1a1e; --chrome: rgba(8, 8, 8, 0.96); --chrome-strong: rgba(8, 8, 8, 0.98); --text: #c6c6cb; --text-strong: #f5f5f7; --chat-text: #c6c6cb; --muted: #8a8a94; --muted-strong: #888892; --muted-foreground: #8a8a94; --border: #202026; --border-strong: #303038; --border-hover: #42424c; --input: #202026; --secondary: #111113; --accent-2: #b8bdc4; --accent-2-muted: rgba(184, 189, 196, 0.7); --accent-2-subtle: rgba(184, 189, 196, 0.1); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --overlay-shadow: var(--shadow-md); --grid-line: rgba(255, 255, 255, 0.025); --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } :root[data-theme="openknot-light"] { --ring: #c41e30; --accent: #c41e30; --accent-hover: #a8192a; --accent-muted: #c41e30; --accent-subtle: rgba(196, 30, 48, 0.08); --accent-glow: rgba(196, 30, 48, 0.12); --primary: #c41e30; --bg: #f9f9fb; --bg-accent: #f2f2f5; --bg-hover: #eaeaef; --bg-muted: #eaeaef; --bg-content: #f2f2f5; --card-foreground: #18181b; --card-highlight: rgba(0, 0, 0, 0.02); --popover-foreground: #18181b; --session-hovercard-progress-surface: color-mix( in srgb, var(--card) 52%, var(--panel-strong) 48% ); --panel: #f9f9fb; --panel-strong: #f2f2f5; --panel-hover: #e4e4ea; --chrome: rgba(249, 249, 251, 0.96); --chrome-strong: rgba(249, 249, 251, 0.98); --text: #3a3a42; --text-strong: #18181b; --chat-text: #3a3a42; --muted: #68676f; --muted-strong: #52525a; --muted-foreground: #68676f; --border: #e2e2e8; --border-strong: #ccccd4; --border-hover: #adadb8; --input: #e2e2e8; --secondary: #f2f2f5; --secondary-foreground: #3a3a42; --accent-2: #5a626e; --accent-2-muted: rgba(90, 98, 110, 0.75); --accent-2-subtle: rgba(90, 98, 110, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.08); --overlay-shadow: var(--shadow-md); --grid-line: rgba(0, 0, 0, 0.04); --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }