@use './variables' as *;

// ========== CSS Custom Properties (exposed to the browser) ==========
// These map SCSS variables to CSS custom properties so Angular components
// can consume them via var() at runtime.

:root {
  // Primary
  --color-primary:          #{$primary-blue};
  --color-primary-light:    #{$primary-blue-light};
  --color-primary-dark:     #{$primary-blue-dark};
  --color-primary-muted:    #{$primary-blue-muted};

  // Accent
  --color-accent:           #{$accent-orange};
  --color-accent-light:     #{$accent-orange-light};
  --color-accent-dark:      #{$accent-orange-dark};
  --color-accent-muted:     #{$accent-orange-muted};

  // Neutrals
  --color-white:            #{$neutral-white};
  --color-cream:            #{$neutral-cream};
  --color-light:            #{$neutral-light};
  --color-medium:           #{$neutral-medium};
  --color-dark:             #{$neutral-dark};
  --color-black:            #{$neutral-black};

  // Semantic
  --color-success:          #{$success-green};
  --color-danger:           #{$danger-red};
  --color-info:             #{$info-blue};

  // Typography
  --font-primary:   #{$font-primary};
  --font-heading:   #{$font-heading};
  --font-mono:      #{$font-mono};

  // Radii
  --radius-sm:  #{$radius-sm};
  --radius-md:  #{$radius-md};
  --radius-lg:  #{$radius-lg};
  --radius-xl:  #{$radius-xl};
  --radius-full: #{$radius-full};

  // Shadows
  --shadow-sm:  #{$shadow-sm};
  --shadow-md:  #{$shadow-md};
  --shadow-lg:  #{$shadow-lg};
  --shadow-xl:  #{$shadow-xl};
}