// =============================================================================
// Decent DS - Light theme mapping
// =============================================================================
// Maps SCSS tokens to CSS custom properties consumed by all components.
// =============================================================================
@use 'tokens' as t;

:root,
.theme-light,
.theme-system {
    color-scheme: light;

    --dc-bg-canvas:   #{t.$neutral-50};
    --dc-bg-surface:  #{t.$neutral-0};
    --dc-bg-raised:   #{t.$neutral-0};
    --dc-bg-inset:    #{t.$neutral-100};
    --dc-bg-hover:    #{t.$neutral-100};
    --dc-bg-active:   #{t.$neutral-200};

    --dc-text-primary:   #{t.$neutral-900};
    --dc-text-secondary: #{t.$neutral-700};
    --dc-text-muted:     #{t.$neutral-500};
    --dc-text-inverse:   #{t.$neutral-0};
    --dc-text-link:      #{t.$brand-primary-600};

    --dc-border-subtle:  #{t.$neutral-200};
    --dc-border-default: #{t.$neutral-300};
    --dc-border-strong:  #{t.$neutral-400};

    --dc-brand-primary:      #{t.$brand-primary-500};
    --dc-brand-primary-fg:   #{t.$neutral-0};
    --dc-brand-primary-soft: #{t.$brand-primary-50};
    --dc-brand-secondary:    #{t.$brand-secondary-500};
    --dc-brand-accent:       #{t.$brand-accent-500};

    --dc-status-success: #{t.$status-success-500};
    --dc-status-info:    #{t.$status-info-500};
    --dc-status-warning: #{t.$status-warning-500};
    --dc-status-danger:  #{t.$status-danger-500};

    --dc-shadow-sm: #{t.$shadow-sm};
    --dc-shadow-md: #{t.$shadow-md};
    --dc-shadow-lg: #{t.$shadow-lg};

    --dc-focus-ring: 0 0 0 3px #{rgba(t.$brand-primary-500, .28)};
}