/* UTF-8 Enconding */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* Font Families */
  --font-title: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Color Palette - HSL based */
  /* Slate - Primary Brand Colors */
  --color-primary-900: hsl(222, 47%, 11%);
  --color-primary-800: hsl(220, 40%, 18%);
  --color-primary-700: hsl(217, 33%, 26%);
  --color-primary-600: hsl(215, 25%, 35%);
  --color-primary-500: hsl(215, 20%, 45%);
  --color-primary-400: hsl(215, 16%, 57%);
  --color-primary-300: hsl(213, 27%, 84%);
  --color-primary-200: hsl(210, 40%, 94%);
  --color-primary-100: hsl(210, 40%, 98%);

  /* Emerald - Accent / Growth Colors */
  --color-accent-800: hsl(142, 72%, 23%);
  --color-accent-700: hsl(142, 72%, 29%);
  --color-accent-600: hsl(142, 70%, 35%);
  --color-accent-500: hsl(142, 70%, 45%);
  --color-accent-400: hsl(142, 70%, 55%);
  --color-accent-300: hsl(142, 70%, 75%);
  --color-accent-200: hsl(142, 70%, 90%);
  --color-accent-100: hsl(142, 70%, 96%);

  /* Semantics / Alert Colors */
  --color-success: hsl(142, 72%, 29%);
  --color-success-bg: hsl(142, 70%, 96%);
  --color-warning: hsl(38, 92%, 50%);
  --color-warning-bg: hsl(40, 90%, 96%);
  --color-danger: hsl(0, 84%, 60%);
  --color-danger-bg: hsl(0, 85%, 97%);
  --color-info: hsl(200, 95%, 43%);
  --color-info-bg: hsl(200, 90%, 96%);

  /* Backgrounds and Surfaces */
  --color-bg-main: var(--color-primary-100);
  --color-bg-card: hsl(0, 0%, 100%);
  --color-border: hsl(214, 32%, 91%);
  --color-text-main: var(--color-primary-900);
  --color-text-muted: var(--color-primary-600);
  --color-text-light: hsl(0, 0%, 100%);

  /* Layout and Spacings */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 5px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.03);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Heights */
  --header-height: 72px;
  --footer-height: 80px;
}