// ==========================================================================
// SEMANTIC COLORS
// ==========================================================================
// Meaningful color tokens that map base tokens to contextual usage
// These provide semantic meaning and make components more maintainable
// ==========================================================================
@use '../../base/colors' as *;
@use '../../base/css-variables' as *;

// BRAND COLORS - Core brand identity (now CSS variable aware)
$semantic-color-brand-primary: $css-color-primary !default;
$semantic-color-brand-secondary: $css-color-secondary !default;
$semantic-color-brand-tertiary: $css-color-tertiary !default;
$semantic-color-brand-accent: $css-color-tertiary !default;

// BRAND ON COLORS - Text/icons on brand colors (now CSS variable aware)
$semantic-color-on-brand-primary: $css-color-on-primary !default;
$semantic-color-on-brand-secondary: $css-color-on-secondary !default;
$semantic-color-on-brand-tertiary: $css-color-on-tertiary !default;

// FEEDBACK COLORS - User feedback and status
$semantic-color-success: $css-color-tertiary !default;      // Often green in M3
$semantic-color-warning: #ff9800 !default;                   // Amber/orange
$semantic-color-danger: $css-color-error !default;          // Red/error
$semantic-color-info: #2196f3 !default;                      // Blue
$semantic-color-neutral-info: $base-color-neutral !default;  // Neutral feedback

// FEEDBACK ON COLORS - Text/icons on feedback colors
$semantic-color-on-success: $css-color-on-tertiary !default;
$semantic-color-on-warning: #000000 !default;
$semantic-color-on-danger: $css-color-on-error !default;
$semantic-color-on-info: #ffffff !default;

// SURFACE COLORS - Background and container colors (now CSS variable aware)
$semantic-color-surface-primary: $css-color-surface !default;
$semantic-color-surface-secondary: $css-color-surface-variant !default;
$semantic-color-surface-elevated: $css-color-surface-high !default;
$semantic-color-surface-sunken: $css-color-surface-low !default;
$semantic-color-surface-interactive: $css-color-surface-container !default;
$semantic-color-surface-disabled: $css-color-surface-dim !default;

// TEXT COLORS - Typography and content (now CSS variable aware)
$semantic-color-text-primary: $css-color-on-surface !default;
$semantic-color-text-secondary: $css-color-on-surface-variant !default;
$semantic-color-text-tertiary: $css-color-outline !default;
$semantic-color-text-disabled: $css-color-outline-variant !default;
$semantic-color-text-inverse: $css-color-inverse-on-surface !default;

// BORDER COLORS - Lines, dividers, outlines (now CSS variable aware)
$semantic-color-border-primary: $css-color-outline !default;
$semantic-color-border-secondary: $css-color-outline-variant !default;
$semantic-color-border-subtle: $css-color-outline-variant !default;
$semantic-color-border-focus: $css-color-primary !default;
$semantic-color-focus: $css-color-primary !default;                        // General focus indicator color
$semantic-color-border-error: $css-color-error !default;
$semantic-color-border-disabled: $css-color-outline-variant !default;

// INTERACTIVE COLORS - Buttons, links, actions (now CSS variable aware)
$semantic-color-interactive-primary: $css-color-primary !default;
$semantic-color-interactive-secondary: $css-color-secondary !default;
$semantic-color-interactive-tertiary: $css-color-tertiary !default;
$semantic-color-interactive-neutral: $css-color-surface-variant !default;

// CONTAINER COLORS - Cards, panels, modals (now CSS variable aware)
$semantic-color-container-primary: $css-color-primary-container !default;
$semantic-color-container-secondary: $css-color-secondary-container !default;
$semantic-color-container-tertiary: $css-color-tertiary-container !default;
$semantic-color-container-error: $css-color-error-container !default;
$semantic-color-container-surface: $css-color-surface-container !default;

// CONTAINER ON COLORS - Text/icons on containers (now CSS variable aware)
$semantic-color-on-container-primary: $css-color-on-primary-container !default;
$semantic-color-on-container-secondary: $css-color-on-secondary-container !default;
$semantic-color-on-container-tertiary: $css-color-on-tertiary-container !default;
$semantic-color-on-container-error: $css-color-on-error-container !default;

// UTILITY COLORS - Special purpose colors (partially CSS variable aware)
$semantic-color-shadow: $css-color-shadow !default;
$semantic-color-scrim: $css-color-scrim !default;
$semantic-color-backdrop: rgba(0, 0, 0, 0.5) !default;
$semantic-color-overlay: rgba(255, 255, 255, 0.1) !default;
$semantic-color-focus-ring: rgba($base-color-primary, 0.12) !default;

// INDIVIDUAL SEMANTIC COLOR TOKENS - Direct access to all base color values

// KEY COLORS
$semantic-color-primary-key: $base-color-primary-key !default;
$semantic-color-secondary-key: $base-color-secondary-key !default;
$semantic-color-tertiary-key: $base-color-tertiary-key !default;
$semantic-color-quaternary-key: $base-color-quaternary-key !default;
$semantic-color-neutral-key: $base-color-neutral-key !default;
$semantic-color-error-key: $base-color-error-key !default;
$semantic-color-neutral-variant-key: $base-color-neutral-variant-key !default;

// PRIMARY COLORS
$semantic-color-primary: $base-color-primary !default;
$semantic-color-on-primary: $base-color-on-primary !default;
$semantic-color-primary-container: $base-color-primary-container !default;
$semantic-color-on-primary-container: $base-color-on-primary-container !default;
$semantic-color-inverse-primary: $base-color-inverse-primary !default;

// SECONDARY COLORS
$semantic-color-secondary: $base-color-secondary !default;
$semantic-color-on-secondary: $base-color-on-secondary !default;
$semantic-color-secondary-container: $base-color-secondary-container !default;
$semantic-color-on-secondary-container: $base-color-on-secondary-container !default;

// TERTIARY COLORS
$semantic-color-tertiary: $base-color-tertiary !default;
$semantic-color-on-tertiary: $base-color-on-tertiary !default;
$semantic-color-tertiary-container: $base-color-tertiary-container !default;
$semantic-color-on-tertiary-container: $base-color-on-tertiary-container !default;

// NEUTRAL COLORS
$semantic-color-neutral: $base-color-neutral !default;
$semantic-color-neutral-variant: $base-color-neutral-variant !default;

// SURFACE COLORS
$semantic-color-surface: $base-color-surface !default;
$semantic-color-surface-bright: $base-color-surface-bright !default;
$semantic-color-surface-dim: $base-color-surface-dim !default;
$semantic-color-on-surface: $base-color-on-surface !default;
$semantic-color-surface-lowest: $base-color-surface-lowest !default;
$semantic-color-surface-low: $base-color-surface-low !default;
$semantic-color-surface-container: $base-color-surface-container !default;
$semantic-color-surface-high: $base-color-surface-high !default;
$semantic-color-surface-highest: $base-color-surface-highest !default;
$semantic-color-surface-variant: $base-color-surface-variant !default;
$semantic-color-on-surface-variant: $base-color-on-surface-variant !default;
$semantic-color-inverse-surface: $base-color-inverse-surface !default;
$semantic-color-inverse-on-surface: $base-color-inverse-on-surface !default;

// BACKGROUND COLORS
$semantic-color-background: $base-color-background !default;
$semantic-color-on-background: $base-color-on-background !default;

// ERROR COLORS
$semantic-color-error: $base-color-error !default;
$semantic-color-on-error: $base-color-on-error !default;
$semantic-color-error-container: $base-color-error-container !default;
$semantic-color-on-error-container: $base-color-on-error-container !default;

// OUTLINE COLORS
$semantic-color-outline: $base-color-outline !default;
$semantic-color-outline-variant: $base-color-outline-variant !default;

// UTILITY COLORS
$semantic-color-shadow: $base-color-shadow !default;
$semantic-color-surface-tint: $base-color-surface-tint !default;
$semantic-color-scrim: $base-color-scrim !default;