/** * DGA semantic dark rebinds. * Activate with: */ :root[data-theme~='dark'] { color-scheme: dark; --dga-bg-default: var(--dga-color-neutral-800); --dga-bg-body: var(--dga-color-neutral-900); --dga-bg-card: var(--dga-bg-default); --dga-bg-card-hovered: var(--dga-color-white-alpha-10); --dga-bg-elevated: var(--dga-bg-default); --dga-bg-nav: var(--dga-bg-default); --dga-bg-surface: var(--dga-bg-default); --dga-bg-topbar: var(--dga-color-neutral-900); --dga-bg-sunken: var(--dga-color-neutral-900); /* Dark portal footer matches nav/header chrome, not brand green. */ --dga-bg-footer: var(--dga-color-neutral-800); --dga-bg-primary-light: var(--dga-color-primary-alpha-10); --dga-bg-primary-faint: var(--dga-color-primary-alpha-10); --dga-bg-overlay: var(--dga-color-black-alpha-70); --dga-bg-neutral-light: var(--dga-color-white-alpha-10); --dga-bg-success-light: var(--dga-color-green-alpha-10); --dga-bg-info-light: var(--dga-color-blue-alpha-10); --dga-bg-warning-light: var(--dga-color-yellow-alpha-10); --dga-bg-error-light: var(--dga-color-red-alpha-10); --dga-bg-success-faint: var(--dga-color-green-alpha-10); --dga-bg-info-faint: var(--dga-color-blue-alpha-10); --dga-bg-warning-faint: var(--dga-color-yellow-alpha-10); --dga-bg-error-faint: var(--dga-color-red-alpha-10); --dga-bg-disabled: var(--dga-color-neutral-700); --dga-bg-disabled-primary: var(--dga-color-primary-900); --dga-text-default: var(--dga-color-neutral-200); --dga-text-display: var(--dga-color-neutral-100); --dga-text-paragraph: var(--dga-color-neutral-300); --dga-text-muted: var(--dga-color-neutral-400); --dga-text-primary: var(--dga-color-primary-400); --dga-text-primary-strong: var(--dga-color-primary-400); --dga-text-success: var(--dga-color-green-400); --dga-text-info: var(--dga-color-blue-400); --dga-text-warning: var(--dga-color-yellow-400); --dga-text-error: var(--dga-color-red-400); --dga-divider: var(--dga-color-white-alpha-10); --dga-border-primary-light: var(--dga-color-primary-400); --dga-border-secondary-light: var(--dga-color-secondary-400); --dga-border-tertiary-light: var(--dga-color-tertiary-400); --dga-border-success: var(--dga-color-green-400); --dga-border-success-light: var(--dga-color-green-400); --dga-border-info: var(--dga-color-blue-400); --dga-border-info-light: var(--dga-color-blue-400); --dga-border-warning: var(--dga-color-yellow-400); --dga-border-warning-light: var(--dga-color-yellow-400); --dga-border-error: var(--dga-color-red-400); --dga-border-error-light: var(--dga-color-red-400); --dga-border-neutral: var(--dga-color-neutral-600); --dga-border-neutral-subtle: var(--dga-color-neutral-700); --dga-border-neutral-faint: var(--dga-color-neutral-750); --dga-border-disabled: var(--dga-color-neutral-600); --dga-focus-ring: var(--dga-color-white); --dga-focus-inner: var(--dga-color-black); --dga-form-field-accent: var(--dga-border-primary); --dga-form-field-bg: var(--dga-bg-default); --dga-form-field-bg-darker: var(--dga-bg-sunken); --dga-form-field-focus-glow: color-mix(in srgb, var(--dga-color-primary-400) 28%, transparent); --dga-form-field-focus-shadow: 0 0 0 3px var(--dga-form-field-focus-glow), inset 0 -2px 0 0 var(--dga-form-field-accent); --dga-chart-color-1: var(--dga-color-primary-400); --dga-chart-color-2: var(--dga-color-blue-400); --dga-chart-color-3: var(--dga-color-secondary-400); --dga-chart-color-4: var(--dga-color-yellow-400); --dga-chart-color-5: var(--dga-color-tertiary-400); --dga-chart-color-6: var(--dga-color-red-400); --dga-chart-grid: var(--dga-border-neutral-subtle); --dga-chart-text: var(--dga-text-muted); --dga-chart-label: var(--dga-text-paragraph); --dga-chart-tooltip-bg: var(--dga-bg-elevated); --dga-chart-tooltip-border: var(--dga-border-neutral); --dga-chart-area-opacity: 0.22; --dga-chart-dot-fill: var(--dga-bg-default); --dga-icon-primary: var(--dga-color-primary-400); --dga-icon-neutral: var(--dga-color-neutral-400); --dga-icon-success: var(--dga-color-green-400); --dga-icon-info: var(--dga-color-blue-400); --dga-icon-warning: var(--dga-color-yellow-400); --dga-icon-error: var(--dga-color-red-400); --dga-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); --dga-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 3px 0px rgba(0, 0, 0, 0.2); --dga-shadow-md: 0px 2px 4px -2px rgba(0, 0, 0, 0.12), 0px 4px 8px -2px rgba(0, 0, 0, 0.2); --dga-shadow-lg: 0px 4px 6px -2px rgba(0, 0, 0, 0.06), 0px 12px 16px -4px rgba(0, 0, 0, 0.16); --dga-shadow-xl: 0px 8px 8px -4px rgba(0, 0, 0, 0.06), 0px 20px 24px -4px rgba(0, 0, 0, 0.16); --dga-shadow-2xl: 0px 24px 48px -12px rgba(0, 0, 0, 0.35); --dga-shadow-3xl: 0px 32px 64px -12px rgba(0, 0, 0, 0.28); }