/* Global Variables */
:root {

    /* Colors */
    --brand-blackboard: #252525;
    --brand-white: #FFFFFF;
    --brand-blue: #B3E6E1;
    --brand-green: #D4FDB1;
    --brand-yellow: #FFFFA9;
    --brand-red: #F5602B;
    --neon-green: #00ff9f;
    --neon-cyan: #00ccff;
    --dark-theme: #1a1a1a;
    --blackboard-light: #404040;
    --header-blur: rgba(37, 37, 37, 0.95);
    --glass-background: rgba(255, 255, 255, 0.12);
    --glass-background-hover: rgba(255, 255, 255, 0.2);
    --glass-border: rgba(255, 255, 255, 0.3);
    --shadow-light: rgba(37, 37, 37, 0.08);
    --shadow-medium: rgba(37, 37, 37, 0.12);
    --shadow-dark: rgba(0, 0, 0, 0.2);
    --shadow-darker: rgba(0, 0, 0, 0.3);
    --shadow-box-light: rgba(0, 0, 0, 0.1);
    --black-button-down: #888888;
    --black-button-hover: #575252;
    --green-button-down: #76AA4A;
    --green-button-hover: #A3E06F;
    --red-button-down: #252525;
    --red-button-hover: #F5602B;
  
    /* Font Families */
    --font-primary: 'Commissioner', sans-serif;
    --font-caps: 'Exo', sans-serif;
  
    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
  
    /* Font Sizes */
    --font-size-xxs: 8px;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 17px;
    --font-size-xl: 20px;
    --font-size-2xl: 23px;
    --font-size-3xl: 32px;
    --font-size-4xl: 40px;
    --font-size-5xl: 48px;
    --font-size-6xl: 55px;
    --font-size-7xl: 64px;
    --font-size-8xl: 72px;
    --font-size-9xl: 88px;
  
    /* Line Heights */
    --line-height-xs: 19px;
    --line-height-sm: 20px;
    --line-height-md: 23px;
    --line-height-lg: 29px;
    --line-height-xl: 35px;
    --line-height-2xl: 45px;
    --line-height-3xl: 62px;
    --line-height-4xl: 73px;
    --line-height-5xl: 91px;
  
    /* Character Spacing */
    --letter-spacing-sm: 0.9px;
    --letter-spacing-md: 1.05px;
    --letter-spacing-lg: 1.27px;
    --letter-spacing-xl: 1.35px;
    --letter-spacing-caps: 0.075em;

    /* Border Radius */
    --radius-sm: var(--font-size-xs);
    --radius-md: var(--font-size-md);
    --radius-lg: var(--font-size-lg);
    --radius-xl: var(--font-size-xl);
    --radius-pill: var(--font-size-3xl);

    /* Standard Dimensions */
    --mobile-menu-size: var(--font-size-3xl);
    --toast-offset: var(--font-size-xl);
      
    /* Gradients */
    --gradient-blue-green: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-green) 100%);
    --gradient-blue-yellow: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-yellow) 100%);
    --gradient-blue-red: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-red) 100%);
    --gradient-green-blue: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-blue) 100%);
    --gradient-green-yellow: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-yellow) 100%);
    --gradient-green-red: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-red) 100%);
    --gradient-yellow-blue: linear-gradient(135deg, var(--brand-yellow) 0%, var(--brand-blue) 100%);
    --gradient-yellow-green: linear-gradient(135deg, var(--brand-yellow) 0%, var(--brand-green) 100%);
    --gradient-yellow-red: linear-gradient(135deg, var(--brand-yellow) 0%, var(--brand-red) 100%);
    --gradient-red-blue: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-blue) 100%);
    --gradient-red-green: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-green) 100%);
    --gradient-red-yellow: linear-gradient(135deg, var(--brand-red) 35%, var(--brand-yellow) 100%);

    /* Gradients - Horizontal (to right) */
    --gradient-blue-green-h: linear-gradient(to right, var(--brand-blue), var(--brand-green));
    --gradient-blue-yellow-h: linear-gradient(to right, var(--brand-blue), var(--brand-yellow));
    --gradient-blue-red-h: linear-gradient(to right, var(--brand-blue), var(--brand-red));
    --gradient-green-blue-h: linear-gradient(to right, var(--brand-green), var(--brand-blue));
    --gradient-green-yellow-h: linear-gradient(to right, var(--brand-green), var(--brand-yellow));
    --gradient-green-red-h: linear-gradient(to right, var(--brand-green), var(--brand-red));
    --gradient-yellow-blue-h: linear-gradient(to right, var(--brand-yellow), var(--brand-blue));
    --gradient-yellow-green-h: linear-gradient(to right, var(--brand-yellow), var(--brand-green));
    --gradient-yellow-red-h: linear-gradient(to right, var(--brand-yellow), var(--brand-red));
    --gradient-red-blue-h: linear-gradient(to right, var(--brand-red), var(--brand-blue));
    --gradient-red-green-h: linear-gradient(to right, var(--brand-red), var(--brand-green));
    --gradient-red-yellow-h: linear-gradient(to right, var(--brand-red), var(--brand-yellow));

    /* Gradients - Vertical (to bottom) */
    --gradient-blue-green-v: linear-gradient(to bottom, var(--brand-blue), var(--brand-green));
    --gradient-blue-yellow-v: linear-gradient(to bottom, var(--brand-blue), var(--brand-yellow));
    --gradient-blue-red-v: linear-gradient(to bottom, var(--brand-blue), var(--brand-red));
    --gradient-green-blue-v: linear-gradient(to bottom, var(--brand-green), var(--brand-blue));
    --gradient-green-yellow-v: linear-gradient(to bottom, var(--brand-green), var(--brand-yellow));
    --gradient-green-red-v: linear-gradient(to bottom, var(--brand-green), var(--brand-red));
    --gradient-yellow-blue-v: linear-gradient(to bottom, var(--brand-yellow), var(--brand-blue));
    --gradient-yellow-green-v: linear-gradient(to bottom, var(--brand-yellow), var(--brand-green));
    --gradient-yellow-red-v: linear-gradient(to bottom, var(--brand-yellow), var(--brand-red));
    --gradient-red-blue-v: linear-gradient(to bottom, var(--brand-red), var(--brand-blue));
    --gradient-red-green-v: linear-gradient(to bottom, var(--brand-red), var(--brand-green));
    --gradient-red-yellow-v: linear-gradient(to bottom, var(--brand-red), var(--brand-yellow));
}