:root {
    /*Colors*/
    --nh-color-bg: white;
    --nh-color-bg-surface: #202020;
    --nh-color-bg-surface-raised: #454B4E;
    --nh-color-foreground: rgba(255, 255, 255, 0.85);
    --nh-color-foreground-secondary: rgba(255, 255, 255, 0.85);
    --nh-color-foreground-muted: rgba(255, 255, 255, 0.65);
    --nh-color-text: var(--nh-color-foreground);
    --nh-color-text-secondary: var(--nh-color-foreground-secondary);
    --nh-color-text-muted: var(--nh-color-foreground-muted);
    --nh-color-border-subtle: rgba(255, 255, 255, 0.07);
    --nh-color-border: rgba(255, 255, 255, 0.15);
    --nh-color-border-strong: rgba(255, 255, 255, 0.2);
    /*Accent*/
    --nh-color-accent: rgba(191, 160, 224, 1);
    --nh-color-accent-light: rgba(220, 200, 240, 1);
    --nh-color-accent-dark: rgba(191, 160, 224, 0.50);
    --nh-color-accent-darker: rgba(191, 160, 224, 0.3);
    --nh-color-accent-darkest: rgba(191, 160, 224, 0.08);
    /*Common Colors*/
    --nh-blue: rgb(71, 120, 206);
    --nh-red: rgb(204, 36, 73);
    --nh-yellow: rgb(255, 211, 102);
    --nh-teal: #4ec9b0;
    /*font sizes*/
    --nh-font-size-sm: 14px;
    --nh-font-size: 16px;
    --nh-font-size-lg: 18px;
    --nh-font-size-sub-heading: 20px;
    --nh-font-size-heading: 24px;
    /*divider*/
    --nh-color-divider: rgba(255, 255, 255, 0.2);
    /*info*/
    --nh-color-info-bg: var(--nh-color-accent-darkest);
    --nh-color-info-border: rgba(191, 160, 224, 0.20);
    --nh-color-info-icon-bg: rgba(191, 160, 224, 0.28);
    --nh-color-info-icon-fg: rgba(220, 200, 240, 1);
    /*warning*/
    --nh-color-warning-bg: rgba(250, 199, 117, 0.08);
    --nh-color-warning-border: rgba(250, 199, 117, 0.20);
    --nh-color-warning-icon-bg: rgba(250, 199, 117, 0.28);
    --nh-color-warning-icon-fg: #FAE0A0;
    /*error*/
    --nh-color-error-bg: rgba(239, 112, 112, 0.08);
    --nh-color-error-border: rgba(239, 112, 112, 0.20);
    --nh-color-error-icon-bg: rgba(239, 112, 112, 0.28);
    --nh-color-error-icon-fg: #F8BBBB;
    /*success*/
    --nh-color-success-bg: rgba(45, 196, 146, 0.08);
    --nh-color-success-border: rgba(45, 196, 146, 0.20);
    --nh-color-success-icon-bg: rgba(45, 196, 146, 0.28);
    --nh-color-success-icon-fg: #96E8CE;
}

/* Dark theme overrides */
[data-theme="dark"] {
    --nh-color-bg: #191919;
    --nh-color-bg-surface: #202020;
    --nh-color-bg-surface-raised: #454B4E;
    --nh-color-foreground: rgba(255, 255, 255, 0.85);
    --nh-color-foreground-muted: rgba(255, 255, 255, 0.65);
    --nh-color-text: var(--nh-color-foreground);
    --nh-color-text-muted: var(--nh-color-foreground-muted);
    --nh-color-accent: rgba(191, 160, 224, 1);
    --nh-color-accent-soft: rgba(191, 160, 224, 0.1);
    --nh-color-border-subtle: rgba(255, 255, 255, 0.07);
    --nh-color-border: rgba(255, 255, 255, 0.15);
    --nh-color-border-strong: rgba(255, 255, 255, 0.2);
    --nh-border-radius: 15px;
    --nh-border-radius-subtle: 5px;
}

[data-theme="light"] {
    --nh-color-bg: #F5F5F5;
    --nh-color-bg-surface: #FFFFFF;
    --nh-color-bg-surface-raised: #E8E8E8;
    --nh-color-foreground: rgba(0, 0, 0, 0.8);
    --nh-color-foreground-muted: rgba(0, 0, 0, 0.5);
    --nh-color-text: var(--nh-color-foreground);
    --nh-color-text-muted: var(--nh-color-foreground-muted);
    --nh-color-accent: rgba(191, 160, 224, 1);
    --nh-color-accent-soft: rgba(191, 160, 224, 0.01);
    --nh-color-border-subtle: rgba(0, 0, 0, 0.06);
    --nh-color-border: rgba(0, 0, 0, 0.1);
    --nh-color-border-strong: rgba(0, 0, 0, 0.2);
}

body {
    background-color: var(--nh-color-bg);
    color: var(--nh-color-text);
}

.nh-bg-base {
    background-color: var(--nh-color-bg);
}

.nh-bg-surface {
    background-color: var(--nh-color-surface);
}

.nh-bg-surface-raised {
    background-color: var(--nh-color-bg-surface-raised);
}