:root, [data-nodedc-theme="dark"] { color-scheme: dark; --nodedc-accent-rgb: 255 47 146; --nodedc-on-accent-rgb: 11 17 23; --nodedc-danger-rgb: 255 116 116; --nodedc-warning-rgb: 255 209 102; --nodedc-success-rgb: 181 255 90; --nodedc-canvas: #050506; --nodedc-canvas-soft: #0b0b0d; --nodedc-text-primary: rgba(247, 248, 244, 0.96); --nodedc-text-secondary: rgba(247, 248, 244, 0.72); --nodedc-text-muted: rgba(247, 248, 244, 0.48); --nodedc-text-disabled: rgba(247, 248, 244, 0.34); /* Runtime material controls override only these five values. */ --nodedc-panel-material-rgb: 21 21 23; --nodedc-panel-material-opacity: 1; --nodedc-panel-material-strong-opacity: 1; --nodedc-panel-material-soft-opacity: 1; --nodedc-field-material-rgb: 42 42 44; --nodedc-field-material-opacity: 1; --nodedc-glass-panel-bg: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-opacity)); --nodedc-glass-panel-bg-strong: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-strong-opacity)); --nodedc-glass-panel-bg-soft: var(--nodedc-canvas-soft); --nodedc-header-pill-bg: rgba(64, 64, 64, 0.48); --nodedc-glass-panel-surface: var(--nodedc-glass-panel-bg); --nodedc-glass-panel-surface-strong: var(--nodedc-glass-panel-bg-strong); --nodedc-glass-control-bg: rgba(110, 110, 110, 0.07); --nodedc-glass-control-hover: rgba(129, 129, 129, 0.13); --nodedc-glass-control-active: rgba(255, 255, 255, 0.92); --nodedc-glass-control-active-text: rgba(8, 8, 10, 0.96); --nodedc-field-bg: rgb(var(--nodedc-field-material-rgb) / var(--nodedc-field-material-opacity)); --nodedc-overlay-bg: rgba(0, 0, 0, 0.46); --nodedc-glass-rim: transparent; --nodedc-glass-control-shadow: none; --nodedc-glass-panel-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); --nodedc-glass-dropdown-shadow: 0 22px 60px rgba(0, 0, 0, 0.42), 0 6px 18px rgba(0, 0, 0, 0.2); --nodedc-focus-surface: rgb(var(--nodedc-accent-rgb) / 0.14); --nodedc-glass-outline: rgba(255, 255, 255, 0.11); --nodedc-app-panel-surface: var(--nodedc-glass-panel-surface-strong); --nodedc-app-panel-shadow: 0 34px 110px rgba(0, 0, 0, 0.42); --nodedc-app-panel-shadow-strong: 0 34px 110px rgba(0, 0, 0, 0.52); --nodedc-panel-action-border: rgba(255, 255, 255, 0.22); --nodedc-panel-action-border-hover: rgba(255, 255, 255, 0.3); --nodedc-panel-item-bg: rgba(255, 255, 255, 0.04); --nodedc-panel-item-hover-bg: rgba(255, 255, 255, 0.085); --nodedc-panel-item-active-bg: rgba(255, 255, 255, 0.115); --nodedc-panel-icon-bg: rgba(255, 255, 255, 0.045); --nodedc-panel-active-icon-bg: rgba(247, 248, 244, 0.96); --nodedc-panel-active-icon-color: rgb(var(--nodedc-on-accent-rgb)); --nodedc-scrollbar-thumb: rgba(255, 255, 255, 0.15); --nodedc-primary-action-bg: rgb(var(--nodedc-accent-rgb)); --nodedc-primary-action-hover: color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 84%, white); --nodedc-primary-action-color: rgb(var(--nodedc-on-accent-rgb)); --nodedc-primary-action-shadow: 0 12px 28px rgb(var(--nodedc-accent-rgb) / 0.2); --nodedc-modal-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)), rgba(7, 7, 10, 0.54); --nodedc-modal-shadow: 0 34px 120px rgba(0, 0, 0, 0.64), 0 10px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.045); --nodedc-floating-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(10, 10, 13, 0.94); } [data-nodedc-theme="light"] { color-scheme: light; --nodedc-accent-rgb: 255 47 146; --nodedc-on-accent-rgb: 11 17 23; --nodedc-danger-rgb: 205 47 67; --nodedc-warning-rgb: 173 111 0; --nodedc-success-rgb: 46 125 76; --nodedc-canvas: #ececec; --nodedc-canvas-soft: #f4f4f4; --nodedc-text-primary: rgba(18, 20, 22, 0.96); --nodedc-text-secondary: rgba(18, 20, 22, 0.7); --nodedc-text-muted: rgba(18, 20, 22, 0.48); --nodedc-text-disabled: rgba(18, 20, 22, 0.32); /* SEO light theme: solid application surfaces with soft, white controls. */ --nodedc-panel-material-rgb: 255 255 255; --nodedc-panel-material-opacity: 1; --nodedc-panel-material-strong-opacity: 1; --nodedc-panel-material-soft-opacity: 1; --nodedc-field-material-rgb: 255 255 255; --nodedc-field-material-opacity: 1; --nodedc-glass-panel-bg: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-opacity)); --nodedc-glass-panel-bg-strong: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-strong-opacity)); --nodedc-glass-panel-bg-soft: var(--nodedc-canvas-soft); --nodedc-header-pill-bg: rgba(255, 255, 255, 0.56); --nodedc-glass-panel-surface: var(--nodedc-glass-panel-bg); --nodedc-glass-panel-surface-strong: var(--nodedc-glass-panel-bg-strong); --nodedc-glass-control-bg: #ffffff; --nodedc-glass-control-hover: #f8f8f8; --nodedc-glass-control-active: rgba(32, 32, 34, 0.96); --nodedc-glass-control-active-text: rgba(247, 248, 244, 0.96); --nodedc-field-bg: rgb(var(--nodedc-field-material-rgb) / var(--nodedc-field-material-opacity)); --nodedc-overlay-bg: rgba(24, 32, 29, 0.22); --nodedc-glass-rim: transparent; --nodedc-glass-control-shadow: 0 10px 22px rgba(24, 32, 29, 0.08); --nodedc-glass-panel-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); --nodedc-glass-dropdown-shadow: 0 22px 60px rgba(24, 32, 29, 0.2), 0 6px 18px rgba(24, 32, 29, 0.1); --nodedc-focus-surface: rgb(var(--nodedc-accent-rgb) / 0.1); --nodedc-glass-outline: rgba(24, 32, 29, 0.12); --nodedc-app-panel-surface: var(--nodedc-glass-panel-surface-strong); --nodedc-app-panel-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); --nodedc-app-panel-shadow-strong: 0 18px 44px rgba(0, 0, 0, 0.14); --nodedc-panel-action-border: rgba(24, 32, 29, 0.12); --nodedc-panel-action-border-hover: rgba(24, 32, 29, 0.22); --nodedc-panel-item-bg: #f4f4f4; --nodedc-panel-item-hover-bg: #eeeeee; --nodedc-panel-item-active-bg: #e8e8e8; --nodedc-panel-icon-bg: #ffffff; --nodedc-panel-active-icon-bg: rgba(32, 32, 34, 0.96); --nodedc-panel-active-icon-color: rgba(247, 248, 244, 0.96); --nodedc-scrollbar-thumb: rgba(24, 32, 29, 0.22); --nodedc-primary-action-bg: rgba(24, 24, 24, 0.94); --nodedc-primary-action-hover: rgba(8, 8, 10, 0.98); --nodedc-primary-action-color: rgba(247, 248, 244, 0.96); --nodedc-primary-action-shadow: none; --nodedc-modal-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.36)), rgba(255, 255, 255, 0.72); --nodedc-modal-shadow: 0 24px 72px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.8); --nodedc-floating-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.72)), rgba(255, 255, 255, 0.94); }