/* ==============================================
   BASE BRAND COLORS
   ============================================== */
/* SkillTrees Brand Color System
   Used across all pages for consistent styling */

:root {
   /* Primary Colors */
   --color-primary-text: #EEFDF9;
   /* Main text color for high contrast on dark backgrounds */
   --color-dark-bg: #1b1c1d;
   /* Dark background color for main containers */
   --color-secondary-bg: #282a2c;
   /* Secondary background color for cards and modals */

   /* Interactive States */
   --color-inactive: rgba(238, 253, 249, 0.063);
   /* Color for inactive elements that you can't click */
   --color-hover: #37393b;
   /* Color for hover state for background of buttons or elements with --color-secondary-bg in hover */
   --color-active: #656A6B;
   /* Color for active state for background of buttons or elements with --color-secondary-bg in active */

   /* Accent Colors */
   --color-accent-blue: #004ba8;
   --color-hover-blue: #143B6A;
   --color-error-red: #FF681F;
   --color-light-blue: #7fd2ed;
   /* Accent color for text that can be clicked, but doesn't have a container (example: links to the terms of service which are inline text links) */
   --color-button-active: #004ba8;
   /* Color for buttons when active */
   --color-success-green: #10b981;
   /* Color for success states, checkboxes, and positive actions */
   --color-success-green-light: rgba(16, 185, 129, 0.2);
   /* Light overlay for success state focus rings */

   /* Secondary Text Colors */
   --color-muted-text: #9ca3af;
   /* Muted/secondary text for reduced emphasis */
   --color-muted-text-light: #b4b7bd;
   /* Lighter muted text */
   --color-muted-text-dark: #6b7280;
   /* Darker muted text for subtle information */

   /* Component Colors */
   --color-modal-backdrop: rgba(0, 0, 0, 0.4);
   /* Semi-transparent backdrop for modals */
   --color-border-subtle: #374151;
   /* Subtle borders and dividers */

   /* Typography */
   --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}