/* ============================================================
   CUHK FACTS & FIGURES - COMPREHENSIVE COLOR PALETTE
   ============================================================
   Based on CUHK Brand Guidelines (August 2025)
   
   Color Naming Convention:
   - Original names (classic-purple, royal-purple, etc.) maintained for backward compatibility
   - CUHK-prefixed names (--cuhk-*) for brand-aligned usage
   - Both naming schemes point to the same color values
   
   Usage:
   - Import this file before styles.css
   - Use --cuhk-* variables for new code
   - Old variables remain for backward compatibility
   ============================================================ */

:root {
   /* ========================================
     PRIMARY BRAND COLORS
     Core CUHK identity colors
     ======================================== */

   /* Purple Variants */
   --classic-purple: #764393;
   --cuhk-classic-purple: #764393;
   /* Primary headings (H1, H2), main branding */

   --royal-purple: #5E3676;
   --cuhk-royal-purple: #5E3676;
   /* Secondary headings (H3), navigation */

   --dynamic-purple: #7D2882;
   --cuhk-dynamic-purple: #7D2882;
   /* Legacy - consider using Royal Purple instead */

   --milky-purple: #F1ECF4;
   --cuhk-milky-purple: #F1ECF4;
   /* Light backgrounds, hover states */

   --dewy-purple: #D5C5DE;
   --cuhk-dewy-purple: #D5C5DE;
   /* Subtle backgrounds, borders */

   --mellow-purple: #9174A8;
   --cuhk-mellow-purple: #9174A8;
   /* Accent elements */

   --cuhk-dark-royal-purple: #472858;
   /* Dark purple for high contrast needs */

   /* Gold Variants */
   --champagne-gold: #F1EBDB;
   --cuhk-champagne-gold: #F1EBDB;
   /* Light backgrounds, subtle accents */

   --classic-gold: #DAD1B2;
   --cuhk-classic-gold: #DAD1B2;
   /* Gold accents (legacy) */

   --dark-classic-gold: #BDB28D;
   --cuhk-dark-classic-gold: #BDB28D;
   /* Darker gold variant */

   --light-royal-gold: #9C885C;
   --cuhk-light-royal-gold: #9C885C;
   /* Medium gold */

   --royal-gold: #84754E;
   --cuhk-royal-gold: #84754E;
   /* Key statistics, numerical highlights */

   --dark-royal-gold: #635636;
   --cuhk-dark-royal-gold: #635636;
   /* Dark gold for emphasis */

   --dynamic-gold: #F0AA23;
   --cuhk-dynamic-gold: #F0AA23;
   /* Legacy - bright gold */

   /* ========================================
     UTILITY COLOR PALETTE
     For infographics and data visualization
     ======================================== */
   --cuhk-indigo: #59378F;
   --cuhk-fawn: #DBB369;
   --cuhk-bloom: #DAC1EE;
   --cuhk-wisteria: #7465AE;
   --cuhk-camel: #CFC59C;
   --cuhk-morning: #D1E0EB;
   --cuhk-petal: #B7B1CE;

   /* ========================================
     ACCENT COLOR PALETTE
     Supporting colors for design elements
     ======================================== */
   --cuhk-beaver: #A88C8B;
   --cuhk-lilac: #A395A2;
   --cuhk-mauve: #775B7A;
   --cuhk-amethyst: #7E678F;
   --cuhk-crocus: #7E759E;
   --cuhk-plum: #8F809F;
   --cuhk-fossil: #908B85;
   --cuhk-smoke: #7A8C8C;
   --cuhk-marble: #5F637D;

   /* ========================================
     HIGHLIGHT COLOR PALETTE
     Subtle colors, not meant to take visual precedence
     ======================================== */
   --cuhk-pine: #78D092;
   --cuhk-fern: #B6D984;
   --cuhk-lake: #78D2D7;
   --cuhk-dawn: #EF8C6D;
   --cuhk-sunrise: #F0B67D;
   --cuhk-clay: #F4D37C;
   --cuhk-sky: #71C2F5;
   --cuhk-rose: #FFB8E4;

   /* ========================================
     NEUTRAL COLOR PALETTE
     Foundation colors for text and backgrounds
     ======================================== */
   --cuhk-black: #2f3133;
   --cuhk-white: #FFFFFF;
   --cuhk-grey: #53565A;
   --cuhk-silver: #85898A;
   --cuhk-haze: #F5F0E6;
   --cuhk-stone: #D0CCC0;

   /* ========================================
     LEGACY ADDITIONAL COLORS
     Maintained for backward compatibility
     Consider migrating to CUHK brand palette
     ======================================== */
   --beaver: #A88C8B;
   --lilac: #A395A2;
   --mauve: #775B7A;
   --amethyst: #7E678F;
   --crocus: #7E759E;
   --plum: #8F809F;
   --fossil: #908B85;
   --smoke: #7A8C8C;
   --marble: #5F637D;

   /* ========================================
     TYPOGRAPHY SCALE
     Font sizes, weights, and line heights
     ======================================== */
   --font-size-main-title: 3rem;
   /* 48px - Main Page Title */
   --font-size-h2: 2rem;
   /* 32px - Primary Section Titles */
   --font-size-h3: 1.5rem;
   /* 24px - Secondary Section Titles */
   --font-size-key-figures: 3rem;
   /* 40px - Statistics */
   --font-size-labels: 1rem;
   /* 18px - Descriptive Labels */
   --font-size-body: 0.95rem;
   /* 16px - Body/List Items */
   --font-size-subtext: 0.875rem;
   /* 14px - Fine Print/Explanations */
   --font-size-nav: 0.95rem;
   /* 16px - Navigation Items */

   /* Font Weights */
   --font-weight-thin: 100;
   --font-weight-extralight: 200;
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 750;

   /* Line Heights */
   --line-height-tight: 1.2;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.7;

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

   /* ========================================
     GRADIENT DEFINITIONS
     Based on CUHK Brand Guidelines
     ======================================== */

   /* Purple Gradients */
   --gradient-purple-vertical: linear-gradient(180deg, var(--cuhk-classic-purple) 0%, var(--cuhk-dynamic-purple) 100%);
   --gradient-purple-horizontal: linear-gradient(90deg, var(--cuhk-classic-purple) 0%, var(--cuhk-dynamic-purple) 100%);
   --gradient-purple-diagonal: linear-gradient(135deg, var(--cuhk-classic-purple) 0%, var(--cuhk-dynamic-purple) 100%);

   /* Gold Gradients */
   --gradient-gold-vertical: linear-gradient(180deg, var(--cuhk-classic-gold) 0%, var(--cuhk-royal-gold) 100%);
   --gradient-gold-horizontal: linear-gradient(90deg, var(--cuhk-classic-gold) 0%, var(--cuhk-royal-gold) 100%);
   --gradient-gold-diagonal: linear-gradient(135deg, var(--cuhk-classic-gold) 0%, var(--cuhk-royal-gold) 100%);

   /* Purple & Gold Mixed Gradients */
   --gradient-purple-gold-vertical: linear-gradient(180deg, var(--cuhk-classic-purple) 0%, var(--cuhk-classic-gold) 100%);
   --gradient-purple-gold-horizontal: linear-gradient(90deg, var(--cuhk-classic-purple) 0%, var(--cuhk-classic-gold) 100%);
   --gradient-purple-gold-diagonal: linear-gradient(135deg, var(--cuhk-classic-purple) 0%, var(--cuhk-classic-gold) 100%);

   /* Soft Gradients (Dewy Purple & White) */
   --gradient-soft-purple-vertical: linear-gradient(180deg, var(--cuhk-bloom) 0%, var(--cuhk-white) 50%, var(--cuhk-morning) 100%);
   --gradient-soft-purple-horizontal: linear-gradient(90deg, var(--cuhk-bloom) 0%, var(--cuhk-white) 50%, var(--cuhk-morning) 100%);

   /* Soft Purple & Bloom */
   --gradient-bloom-vertical: linear-gradient(180deg, var(--cuhk-dewy-purple) 0%, var(--cuhk-white) 50%, var(--cuhk-bloom) 100%);
   --gradient-bloom-horizontal: linear-gradient(90deg, var(--cuhk-dewy-purple) 0%, var(--cuhk-white) 50%, var(--cuhk-bloom) 100%);
}

/* ========================================
   GRADIENT USAGE GUIDELINES
   ========================================
   
   CUHK's approved gradients offer tonal depth and flexibility 
   across formal, editorial, and casual expressions. Built from 
   core colour pairings, they reflect the brand's balance of 
   tradition and creativity.
   
   These gradients may be used as backgrounds, icons, or graphic 
   elements to enhance visual storytelling.
   
   Contrast must always be prioritised to ensure clarity, 
   accessibility, and brand integrity.
   
   APPROVED GRADIENT COMBINATIONS:
   
   1. Classic Purple to Dynamic Purple
      - Creates strong, bold purple depth
      - Use for hero sections, prominent backgrounds
   
   2. Classic Gold to Royal Gold
      - Warm, sophisticated gold gradient
      - Use for accent elements, highlights
   
   3. Classic Purple to Classic Gold
      - Full brand spectrum gradient
      - Use for special sections, key highlights
   
   4. Dewy Purple to White to Bloom
      - Soft, subtle gradient
      - Use for gentle backgrounds, cards
   
   5. Bloom to White to Morning
      - Light, airy gradient
      - Use for subtle backgrounds, overlays
   
   IMPLEMENTATION NOTES:
   - Gradients work at various angles (vertical, horizontal, diagonal)
   - Always test text contrast when placing content over gradients
   - Consider using semi-transparent overlays for better text readability
   - Gradients should enhance, not overpower the content
   ======================================== */

/* ========================================
   WCAG COLOR CONTRAST GUIDELINES
   ======================================== 
   
   APPROVED HIGH CONTRAST COMBINATIONS:
   
   1. White text on backgrounds (WCAG AAA ✓):
      - Classic Purple (#764393)
      - Royal Purple (#5E3676)
      - Dark Royal Purple (#472858)
   
   2. Black text on backgrounds (WCAG AAA ✓):
      - White (#FFFFFF)
      - Haze (#F5F0E6)
      - Milky Purple (#F1ECF4)
      - Dewy Purple (#D5C5DE)
      - Champagne Gold (#F1EBDE)
   
   3. Dark text (Grey #53565A) on light backgrounds:
      - White - WCAG AAA ✓
      - Haze - WCAG AAA ✓
      - Milky Purple - WCAG AA ✓
   
   4. Royal Gold (#84754E) for key statistics:
      - On White background - WCAG AA for large text ✓
      - Should only be used for large numbers/headings
   
   USAGE GUIDELINES:
   - Always verify contrast ratios using WebAIM Contrast Checker
   - Interactive elements must meet WCAG AA minimum (4.5:1)
   - Aim for WCAG AAA (7:1) where possible
   - Large text (18pt+ or 14pt+ bold): 3:1 for AA, 4.5:1 for AAA
   ======================================== */

/* ========================================
   COLOR UTILITY CLASSES
   ======================================== */

/* Text Color Classes */
.classic-purple {
   color: var(--classic-purple);
}

.royal-purple {
   color: var(--royal-purple);
}

.dynamic-purple {
   color: var(--dynamic-purple);
}

.champagne-gold {
   color: var(--champagne-gold);
}

.classic-gold {
   color: var(--classic-gold);
}

.dark-classic-gold {
   color: var(--dark-classic-gold);
}

.light-royal-gold {
   color: var(--light-royal-gold);
}

.royal-gold {
   color: var(--royal-gold);
}

.dark-royal-gold {
   color: var(--dark-royal-gold);
}

.dynamic-gold {
   color: var(--dynamic-gold);
}

.milky-purple {
   color: var(--milky-purple);
}

.dewy-purple {
   color: var(--dewy-purple);
}

.mellow-purple {
   color: var(--mellow-purple);
}

.beaver {
   color: var(--beaver);
}

.lilac {
   color: var(--lilac);
}

.mauve {
   color: var(--mauve);
}

.amethyst {
   color: var(--amethyst);
}

.crocus {
   color: var(--crocus);
}

.plum {
   color: var(--plum);
}

.fossil {
   color: var(--fossil);
}

.smoke {
   color: var(--smoke);
}

.marble {
   color: var(--marble);
}

/* Background Color Classes */
.bg-classic-purple {
   background-color: var(--classic-purple);
}

.bg-royal-purple {
   background-color: var(--royal-purple);
}

.bg-dynamic-purple {
   background-color: var(--dynamic-purple);
}

.bg-champagne-gold {
   background-color: var(--champagne-gold);
}

.bg-classic-gold {
   background-color: var(--classic-gold);
}

.bg-dark-classic-gold {
   background-color: var(--dark-classic-gold);
}

.bg-light-royal-gold {
   background-color: var(--light-royal-gold);
}

.bg-royal-gold {
   background-color: var(--royal-gold);
}

.bg-dark-royal-gold {
   background-color: var(--dark-royal-gold);
}

.bg-dynamic-gold {
   background-color: var(--dynamic-gold);
}

.bg-milky-purple {
   background-color: var(--milky-purple);
}

.bg-dewy-purple {
   background-color: var(--dewy-purple);
}

.bg-mellow-purple {
   background-color: var(--mellow-purple);
}

.bg-beaver {
   background-color: var(--beaver);
}

.bg-lilac {
   background-color: var(--lilac);
}

.bg-mauve {
   background-color: var(--mauve);
}

.bg-amethyst {
   background-color: var(--amethyst);
}

.bg-crocus {
   background-color: var(--crocus);
}

.bg-plum {
   background-color: var(--plum);
}

.bg-fossil {
   background-color: var(--fossil);
}

.bg-smoke {
   background-color: var(--smoke);
}

.bg-marble {
   background-color: var(--marble);
}

/* CUHK Brand Color Classes (New) */
.cuhk-classic-purple {
   color: var(--cuhk-classic-purple);
}

.cuhk-royal-purple {
   color: var(--cuhk-royal-purple);
}

.cuhk-royal-gold {
   color: var(--cuhk-royal-gold);
}

.cuhk-black {
   color: var(--cuhk-black);
}

.cuhk-grey {
   color: var(--cuhk-grey);
}

.cuhk-white {
   color: var(--cuhk-white);
}

.bg-cuhk-white {
   background-color: var(--cuhk-white);
}

.bg-cuhk-haze {
   background-color: var(--cuhk-haze);
}

.bg-cuhk-milky-purple {
   background-color: var(--cuhk-milky-purple);
}

.bg-cuhk-champagne-gold {
   background-color: var(--cuhk-champagne-gold);
}

/* ========================================
   GRADIENT UTILITY CLASSES
   ======================================== */

/* Purple Gradients */
.bg-gradient-purple-vertical {
   background: var(--gradient-purple-vertical);
}

.bg-gradient-purple-horizontal {
   background: var(--gradient-purple-horizontal);
}

.bg-gradient-purple-diagonal {
   background: var(--gradient-purple-diagonal);
}

/* Gold Gradients */
.bg-gradient-gold-vertical {
   background: var(--gradient-gold-vertical);
}

.bg-gradient-gold-horizontal {
   background: var(--gradient-gold-horizontal);
}

.bg-gradient-gold-diagonal {
   background: var(--gradient-gold-diagonal);
}

/* Purple & Gold Mixed Gradients */
.bg-gradient-purple-gold-vertical {
   background: var(--gradient-purple-gold-vertical);
}

.bg-gradient-purple-gold-horizontal {
   background: var(--gradient-purple-gold-horizontal);
}

.bg-gradient-purple-gold-diagonal {
   background: var(--gradient-purple-gold-diagonal);
}

/* Soft Gradients */
.bg-gradient-soft-purple-vertical {
   background: var(--gradient-soft-purple-vertical);
}

.bg-gradient-soft-purple-horizontal {
   background: var(--gradient-soft-purple-horizontal);
}

/* Bloom Gradients */
.bg-gradient-bloom-vertical {
   background: var(--gradient-bloom-vertical);
}

.bg-gradient-bloom-horizontal {
   background: var(--gradient-bloom-horizontal);
}