/* ==========================================================================
   FUSION GLOBAL VARIABLES - Based on Existing Codebase Analysis
   ========================================================================== */

:root {
  /* ==========================================================================
     COLOR SYSTEM - Based on Existing Colors in Codebase
     ========================================================================== */

  /* ==========================================================================
     STANDARDIZED 6-COLOR SYSTEM - Clean, Minimal, Consistent
     Replacing 40+ color variables with 6 semantic colors
     ========================================================================== */

  /* Core 6 Colors */
  --color-black: #222222;          /* Primary text, important elements */
  --color-white: #f7f6f3;          /* Backgrounds, surfaces (warm off-white) */
  --color-red: #dc3545;            /* Errors, alerts, warnings */
  --color-gray-dark: #625C4B;      /* Secondary text, labels */
  --color-gray-light: #857C60;     /* Subtle text, disabled states */
  --color-gray-very-light: #e7e5dd; /* Backgrounds, borders, separators (warm beige) */

  /* Chart Colors - Distinct colors for course data visualization */
  --chart-color-primary: #8884d8;    /* Purple - Course A */
  --chart-color-secondary: #ff7c7c;  /* Red/Pink - Course B */
  --chart-color-tertiary: #82defd;   /* Blue - Course C */

  /* ==========================================================================
     LEGACY VARIABLE MAPPINGS - For Backward Compatibility
     These map old variables to our new 6-color system
     ========================================================================== */

  /* Background Colors - All map to white or very light gray */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-very-light);
  --color-bg-tertiary: var(--color-gray-very-light);
  --color-bg-quaternary: var(--color-white);
  --color-bg-quinary: var(--color-white);
  --color-bg-senary: var(--color-gray-very-light);
  --color-bg-septenary: var(--color-white);
  --color-bg-octonary: var(--color-white);
  --color-bg-nonary: var(--color-white);
  --color-bg-denary: var(--color-white);

  /* Border Colors - All map to very light gray */
  --color-border-light: var(--color-gray-very-light);
  --color-border-medium: var(--color-gray-very-light);
  --color-border-dark: var(--color-gray-very-light);
  --color-border-darker: var(--color-gray-very-light);
  --color-border-darkest: var(--color-gray-very-light);

  /* Text Colors - Map to our standardized grays */
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-gray-dark);
  --color-text-tertiary: var(--color-gray-dark);
  --color-text-quaternary: var(--color-black);
  --color-text-quinary: var(--color-gray-dark);
  --color-text-senary: var(--color-gray-dark);
  --color-text-septenary: var(--color-gray-light);
  --color-text-octonary: var(--color-gray-dark);
  --color-text-nonary: var(--color-black);

  /* Accent Colors - Keep red, others become black for now */
  --color-accent-blue: var(--color-black);
  --color-accent-blue-dark: var(--color-black);
  --color-accent-red: var(--color-red);
  --color-accent-green: var(--color-red);
  --color-accent-green-light: var(--color-red);

  /* Logo Sizing System - Consistent Brand Partner Logos */
  --logo-size-large: 148px;
  --logo-size-medium: 120px;
  --logo-size-small: 120px;
  --logo-size-xs: 80px;
  --logo-size-xxs: 60px;

  --logo-container-large: 180px;
  --logo-container-medium: 148px;
  --logo-container-small: 120px;
  --logo-container-xs: 120px;
  --logo-container-xxs: 80px;

  /* ==========================================================================
     NEW 6-FONT SYSTEM - Clean, Accessible, Scalable
     Replaces 23+ variables with 6 semantic sizes
     ========================================================================== */

  /* Core Font Sizes */
  --fs-display: 38px;  /* Page titles, hero headlines */
  --fs-h1: 30px;       /* Section headers */
  --fs-h2: 25px;       /* Emphasis text, large sub-headings */
  --fs-h3: 22px;       /* Person names, medium headings */
  --fs-subhead: 20px;  /* Sub-headings, card labels, tabs */
  --fs-body-lg: 18px;  /* Card subtitles, descriptions */
  --fs-body: 16px;     /* Main content, metadata */
  --fs-body-sm: 15px;  /* Course card titles, nav links */
  --fs-small: 14px;    /* Secondary text, captions */
  --fs-tiny: 13px;     /* Labels, fine print */

  /* Legacy variable mappings for backward compatibility */
  --fs-base: var(--fs-body);
  --fs-heading-section: var(--fs-h2);
  --fs-heading-secondary: var(--fs-body);
  --fs-text-medium: var(--fs-body);
  --fs-body-primary: var(--fs-small);
  --fs-text-small: var(--fs-small);
  --fs-body-small: var(--fs-tiny);

  /* Hero and display size mappings */
  --fs-hero-primary: var(--fs-display);
  --fs-hero-secondary: var(--fs-h1);
  --fs-hero-tertiary: var(--fs-h1);
  --fs-heading-major: var(--fs-h1);
  --fs-heading-large: var(--fs-h1);
  --fs-title: var(--fs-h1);
  --fs-subheading: var(--fs-h2);
  --fs-nav-large: var(--fs-h2);

  /* Legacy display sizes - all map to our new display size */
  --fs-display-large: var(--fs-display);
  --fs-display-huge: var(--fs-display);

  /* ==========================================================================
     RESPONSIVE FONT SIZE SYSTEM - Mobile First
     Using existing patterns but with responsive scaling
     ========================================================================== */

  /* Mobile defaults - smaller versions of existing sizes */
  --fs-body: var(--fs-body-primary); /* 14px - most used body text */
  --fs-button: var(--fs-body-primary); /* 14px - consistent with body */
  --fs-input: var(--fs-body-primary); /* 14px - consistent with body */
  --fs-heading-1: var(--fs-heading-section); /* 24px - section headings */
  --fs-heading-2: var(--fs-heading-secondary); /* 20px - secondary headings */
  --fs-heading-3: var(--fs-text-medium); /* 18px - medium text */
  --fs-hero: var(--fs-heading-large); /* 28px - large headings */
  --fs-nav: var(--fs-heading-secondary); /* 20px - navigation */

  /* ==========================================================================
     RESPONSIVE BREAKPOINTS - Existing Pattern Analysis
     ========================================================================== */

  --breakpoint-mobile: 480px; /* Small mobile */
  --breakpoint-tablet: 768px; /* Tablet */
  --breakpoint-desktop: 1024px; /* Desktop */
  --breakpoint-large: 1200px; /* Large desktop */

  /* ==========================================================================
     SPACING SYSTEM - Based on Existing Patterns
     ========================================================================== */

  --space-2: 2px; /* 2px */
  --space-4: 4px; /* 4px */
  --space-6: 6px; /* 6px */
  --space-8: 8px; /* 8px */
  --space-10: 10px; /* 10px */
  --space-12: 12px; /* 12px */
  --space-14: 14px; /* 14px */
  --space-16: 16px; /* 16px */
  --space-18: 18px; /* 18px */
  --space-20: 20px; /* 20px */
  --space-24: 24px; /* 24px */
  --space-28: 28px; /* 28px */
  --space-32: 32px; /* 32px */
  --space-36: 36px; /* 36px */
  --space-40: 40px; /* 40px */
  --space-44: 44px; /* 44px */
  --space-48: 48px; /* 48px */
  --space-60: 60px; /* 60px */
  --space-72: 72px; /* 72px */
  --space-80: 80px; /* 80px */
  --space-96: 96px; /* 96px */
  --space-112: 112px; /* 112px */
  --space-128: 128px; /* 128px */

  /* ==========================================================================
     FONT WEIGHTS - Based on Existing Patterns
     ========================================================================== */

  --font-light: 300; /* Most common light weight */
  --font-normal: 400; /* Normal weight */
  --font-medium: 500; /* Medium weight */
  --font-semibold: 600; /* Semi-bold weight */
  --font-bold: 700; /* Bold weight */

  /* ==========================================================================
     TOUCH TARGETS - Mobile Standards
     ========================================================================== */

  --touch-target-min: 44px; /* Minimum touch target */
  --touch-target-comfortable: 48px; /* Comfortable touch target */

  /* ==========================================================================
     LINE HEIGHTS - Common Patterns
     ========================================================================== */

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* ==========================================================================
     BORDER RADIUS SYSTEM - Consistent Rounding
     ========================================================================== */

  --border-radius-lg: 10px;      /* Content containers, dashboard panels, main sections */
  --border-radius-sm: 6px;       /* Small interactive elements, buttons, inputs */
  --border-radius-special: 16px; /* Special table headers with gradients */
  --border-radius-none: 0;       /* No radius for intentional sharp corners */
  --border-radius-circle: 50%;   /* Circular elements */

  /* ==========================================================================
     APPLICATION SPECIFIC VARIABLES
     ========================================================================== */

  font-family: "DM Sans", sans-serif;

  /* Max content width */
  --max-width: 1440px;
}

/* ==========================================================================
   PAGE CONTAINER - Full viewport width; individual sections handle their own max-width
   ========================================================================== */

.page-container {
  width: 100%;
}

/* ==========================================================================
   RESPONSIVE FONT SIZE SCALING
   Tablet and desktop get larger versions of existing sizes
   ========================================================================== */

@media (min-width: 768px) {
  :root {
    --fs-body: var(--fs-base); /* 16px - base text on tablet+ */
    --fs-button: var(--fs-base); /* 16px - buttons on tablet+ */
    --fs-input: var(--fs-base); /* 16px - inputs on tablet+ */
    --fs-heading-1: var(--fs-title); /* 30px - page titles */
    --fs-heading-2: var(--fs-heading-section); /* 24px - section headings */
    --fs-heading-3: var(--fs-heading-secondary); /* 20px - secondary headings */
    --fs-hero: var(--fs-hero-tertiary); /* 32px - hero text */
    --fs-nav: var(--fs-nav-large); /* 25px - navigation */
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-heading-1: var(--fs-heading-major); /* 35px - major headings */
    --fs-hero: var(--fs-hero-primary); /* 40px - primary hero */
  }
}

@media (min-width: 1200px) {
  :root {
    --fs-hero: var(--fs-hero-secondary); /* 36px+ - secondary hero */
  }
}

/* ==========================================================================
   UTILITY CLASSES - Common Font Sizes
   ========================================================================== */

.text-tiny {
  font-size: var(--fs-tiny);
}
.text-small {
  font-size: var(--fs-small);
}
.text-body-small {
  font-size: var(--fs-tiny);
}
.text-body {
  font-size: var(--fs-body);
}
.text-base {
  font-size: var(--fs-body);
}
.text-medium {
  font-size: var(--fs-body);
}
.text-heading-3 {
  font-size: var(--fs-heading-3);
}
.text-heading-2 {
  font-size: var(--fs-heading-2);
}
.text-subheading {
  font-size: var(--fs-h2);
}
.text-heading-1 {
  font-size: var(--fs-heading-1);
}
.text-large {
  font-size: var(--fs-h1);
}
.text-title {
  font-size: var(--fs-h1);
}
.text-hero {
  font-size: var(--fs-h1);
}
.text-display {
  font-size: var(--fs-display);
}

.font-light {
  font-weight: var(--font-light);
}
.font-normal {
  font-weight: var(--font-normal);
}
.font-medium {
  font-weight: var(--font-medium);
}
.font-semibold {
  font-weight: var(--font-semibold);
}
.font-bold {
  font-weight: var(--font-bold);
}

.leading-tight {
  line-height: var(--leading-tight);
}
.leading-normal {
  line-height: var(--leading-normal);
}
.leading-relaxed {
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   RESPONSIVE UTILITIES
   ========================================================================== */

@media (min-width: 768px) {
  .md\:text-tiny {
    font-size: var(--fs-tiny);
  }
  .md\:text-small {
    font-size: var(--fs-small);
  }
  .md\:text-body {
    font-size: var(--fs-body);
  }
  .md\:text-base {
    font-size: var(--fs-body);
  }
  .md\:text-medium {
    font-size: var(--fs-body);
  }
  .md\:text-heading-3 {
    font-size: var(--fs-heading-3);
  }
  .md\:text-heading-2 {
    font-size: var(--fs-heading-2);
  }
  .md\:text-heading-1 {
    font-size: var(--fs-heading-1);
  }
  .md\:text-hero {
    font-size: var(--fs-h1);
  }
}

@media (min-width: 1024px) {
  .lg\:text-tiny {
    font-size: var(--fs-tiny);
  }
  .lg\:text-small {
    font-size: var(--fs-small);
  }
  .lg\:text-body {
    font-size: var(--fs-body);
  }
  .lg\:text-base {
    font-size: var(--fs-body);
  }
  .lg\:text-medium {
    font-size: var(--fs-body);
  }
  .lg\:text-heading-3 {
    font-size: var(--fs-heading-3);
  }
  .lg\:text-heading-2 {
    font-size: var(--fs-heading-2);
  }
  .lg\:text-heading-1 {
    font-size: var(--fs-heading-1);
  }
  .lg\:text-hero {
    font-size: var(--fs-h1);
  }
}

/* ==========================================================================
   GLOBAL FONT FAMILY APPLICATION
   ========================================================================== */

* {
  font-family: "DM Sans", sans-serif;
}

/* ==========================================================================
   BRAND PARTNER LOGO UTILITIES - Consistent Sizing Across All Components
   ========================================================================== */

/* Logo Container Classes */
.logo-container-large {
  width: var(--logo-container-large);
  height: 100px;
  background: var(--color-bg-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.logo-container-medium {
  width: var(--logo-container-medium);
  height: 80px;
  background: var(--color-bg-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.logo-container-small {
  width: var(--logo-container-small);
  height: 60px;
  background: var(--color-bg-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.logo-container-xs {
  width: var(--logo-container-xs);
  height: 50px;
  background: var(--color-bg-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.logo-container-xxs {
  width: var(--logo-container-xxs);
  height: 40px;
  background: var(--color-bg-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

/* Logo Image Classes */
.logo-img-large {
  width: var(--logo-size-large);
  min-width: var(--logo-size-large);
  max-width: var(--logo-size-large);
  height: var(--logo-size-large);
  max-height: var(--logo-size-large);
  object-fit: contain;
}

.logo-img-medium {
  width: var(--logo-size-medium);
  min-width: var(--logo-size-medium);
  max-width: var(--logo-size-medium);
  height: var(--logo-size-medium);
  max-height: var(--logo-size-medium);
  object-fit: contain;
}

.logo-img-small {
  width: var(--logo-size-small);
  min-width: var(--logo-size-small);
  max-width: var(--logo-size-small);
  height: var(--logo-size-small);
  max-height: var(--logo-size-small);
  object-fit: contain;
}

.logo-img-xs {
  width: var(--logo-size-xs);
  min-width: var(--logo-size-xs);
  max-width: var(--logo-size-xs);
  height: var(--logo-size-xs);
  max-height: var(--logo-size-xs);
  object-fit: contain;
}

.logo-img-xxs {
  width: var(--logo-size-xxs);
  min-width: var(--logo-size-xxs);
  max-width: var(--logo-size-xxs);
  height: var(--logo-size-xxs);
  max-height: var(--logo-size-xxs);
  object-fit: contain;
}

/* Responsive Logo Sizing */
@media (max-width: 768px) {
  .logo-container-large {
    width: 160px;
    height: 90px;
  }

  .logo-img-large {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    max-height: 60px;
  }

  .logo-container-medium {
    width: 140px;
    height: 80px;
  }

  .logo-img-medium {
    width: 115px;
    min-width: 115px;
    max-width: 115px;
    max-height: 50px;
  }
}

@media (max-width: 480px) {
  .logo-container-large {
    width: 140px;
    height: 80px;
  }

  .logo-img-large {
    width: 115px;
    min-width: 115px;
    max-width: 115px;
    max-height: 50px;
  }

  .logo-container-medium {
    width: 120px;
    height: 70px;
  }

  .logo-img-medium {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    max-height: 120px;
  }
}