// =============================================================================
// Decent DS - Dark theme mapping
// =============================================================================
@use 'tokens' as t;

.theme-dark {
    color-scheme: dark;

    --dc-bg-canvas:   #{t.$neutral-950};
    --dc-bg-surface:  #{t.$neutral-900};
    --dc-bg-raised:   #{t.$neutral-800};
    --dc-bg-inset:    #{t.$neutral-800};
    --dc-bg-hover:    rgba(255, 255, 255, .04);
    --dc-bg-active:   rgba(255, 255, 255, .08);

    --dc-text-primary:   #F9FAFB;
    --dc-text-secondary: #{t.$neutral-200};
    --dc-text-muted:     #{t.$neutral-400};
    --dc-text-inverse:   #{t.$neutral-900};
    --dc-text-link:      #{t.$brand-primary-300};

    --dc-border-subtle:  rgba(255, 255, 255, .06);
    --dc-border-default: rgba(255, 255, 255, .12);
    --dc-border-strong:  rgba(255, 255, 255, .18);

    --dc-brand-primary:      #{t.$brand-primary-400};
    --dc-brand-primary-fg:   #{t.$neutral-950};
    --dc-brand-primary-soft: rgba(89, 137, 255, .16);
    --dc-brand-secondary:    #{t.$brand-secondary-300};
    --dc-brand-accent:       #{t.$brand-accent-300};

    --dc-status-success: #34D399;
    --dc-status-info:    #60A5FA;
    --dc-status-warning: #FBBF24;
    --dc-status-danger:  #F87171;

    --dc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
    --dc-shadow-md: 0 8px 16px rgba(0, 0, 0, .36);
    --dc-shadow-lg: 0 24px 48px rgba(0, 0, 0, .5);

    --dc-focus-ring: 0 0 0 3px rgba(89, 137, 255, .38);
}

// System preference - dark
@media (prefers-color-scheme: dark) {
    .theme-system {
        color-scheme: dark;

        --dc-bg-canvas:   #{t.$neutral-950};
        --dc-bg-surface:  #{t.$neutral-900};
        --dc-bg-raised:   #{t.$neutral-800};
        --dc-bg-inset:    #{t.$neutral-800};
        --dc-bg-hover:    rgba(255, 255, 255, .04);
        --dc-bg-active:   rgba(255, 255, 255, .08);

        --dc-text-primary:   #F9FAFB;
        --dc-text-secondary: #{t.$neutral-200};
        --dc-text-muted:     #{t.$neutral-400};
        --dc-text-inverse:   #{t.$neutral-900};
        --dc-text-link:      #{t.$brand-primary-300};

        --dc-border-subtle:  rgba(255, 255, 255, .06);
        --dc-border-default: rgba(255, 255, 255, .12);
        --dc-border-strong:  rgba(255, 255, 255, .18);

        --dc-brand-primary:      #{t.$brand-primary-400};
        --dc-brand-primary-fg:   #{t.$neutral-950};
        --dc-brand-primary-soft: rgba(89, 137, 255, .16);

        --dc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
        --dc-shadow-md: 0 8px 16px rgba(0, 0, 0, .36);
        --dc-shadow-lg: 0 24px 48px rgba(0, 0, 0, .5);

        --dc-focus-ring: 0 0 0 3px rgba(89, 137, 255, .38);
    }
}