/* ================================================================
     CAREERS DESIGN TOKENS - CSS CUSTOM PROPERTIES
     ================================================================
     Source: Figma Design System
     Purpose: Design tokens for Careers landing page
     Last update: 2026-04-14 09:14 (Updated with Figma design tokens)
     
     Sitecore Media Library Path:
     /v2/careers//-/media/0D5C608917CC413498E8ABCDEFBED589
     
     Usage in careers-css.css:
     @import url('/v2/careers/-/media/0D5C608917CC413498E8ABCDEFBED589');
     ================================================================ */

:root {
   /* ============================================
       COLOR TOKENS - CORE SEMANTIC COLORS
       ============================================
       These are the main brand colors used throughout the careers page
    */
   --color-core-blue: #1262B2;
   /* atlantic-blue (primitives/blue/b400) */
   --color-core-yellow: #F2B600;
   /* chevron-yellow (primitives/yellow/y400) */
   --color-core-white: #FFFFFF;
   /* white (primitives/neutral/n100) */
   --color-core-black: #000000;
   /* black (primitives/neutral/n1000) */
   --color-core-orange: #B54911;
   /* orange (primitives/orange/o400) */
   --color-core-green: #008765;
   /* green (primitives/green/g400) */
   --color-core-purple: #6B3D99;
   /* purple-dark (primitives/purple/p500) - Used in Choose Role */
   --color-core-plum: #42429E;
   /* plum (primitives/plum/pm400) */
   --color-core-teal: #008299;
   /* teal (primitives/teal/t400) */
   --color-core-red: #CC3B4A;
   /* red (primitives/red/r400) */
   --color-core-gray: #F2F2F2;
   /* gray (primitives/neutral/n300) */

   /* ============================================
       COLOR TOKENS - ACCENT COLORS (LIGHT/DARK VARIANTS)
       ============================================
       Used for hover states, secondary UI elements
    */
   /* Blue Accents */
   --color-accent-blue-light: #82C1FF;
   /* primitives/blue/b300 */
   --color-accent-blue-dark: #0D4680;
   /* primitives/blue/b500 - Button hover */

   /* Yellow Accents */
   --color-accent-yellow-light: #FFD040;
   /* primitives/yellow/y300 - Dropdown hover bg */
   --color-accent-yellow-dark: #BA8C00;
   /* primitives/yellow/y500 - Borders/dividers */
   --color-accent-yellow-darkest: #463500;
   /* primitives/yellow/y700 - Nav active border */

   /* Orange Accents */
   --color-accent-orange-light: #FF8140;
   /* primitives/orange/o300 */
   --color-accent-orange-dark: #993400;
   /* primitives/orange/o500 */

   /* Green Accents */
   --color-accent-green-light: #33CCA6;
   /* primitives/green/g300 */
   --color-accent-green-dark: #00664C;
   /* primitives/green/g500 - Button hover */

   /* Purple Accents */
   --color-accent-purple-light: #C68CFF;
   /* primitives/purple/p300 */
   --color-accent-purple-dark: #6B3D99;
   /* primitives/purple/p500 - Choose role bg */

   /* Plum Accents */
   --color-accent-plum-light: #6262E3;
   /* primitives/plum/pm300 */
   --color-accent-plum-lighter: #BABAF3;
   /* primitives/plum/pm200 - Button hover */
   --color-accent-plum-dark: #34347D;
   /* primitives/plum/pm500 - Button text hover */

   /* Teal Accents */
   --color-accent-teal-lightest: #E7F8FB;
   /* primitives/teal/t100 - Early career section bg */
   --color-accent-teal-light: #3CC6DE;
   /* primitives/teal/t300 */
   --color-accent-teal-dark: #005D6E;
   /* primitives/teal/t500 - Benefit cards, button states */

   /* Red Accents */
   --color-accent-red-light: #FF7381;
   /* primitives/red/r300 */

   /* ============================================
       COLOR TOKENS - NEUTRAL SCALE
       ============================================
       Grays for backgrounds, borders, etc.
    */
   --color-neutral-100: #FFFFFF;
   /* white */
   --color-neutral-300: #F2F2F2;
   /* 5% gray */
   --color-neutral-1000: #000000;
   /* black */
   --color-neutral-body-text: #333333;
   /* Default body text (not in Figma, legacy) */

   /* ============================================
       TYPOGRAPHY TOKENS - FONT FAMILIES
       ============================================
    */
   --font-family-serif: 'Merriweather', serif;
   --font-family-sans: 'Open Sans', sans-serif;
   --font-family-fallback: 'Georgia', serif;

   /* ============================================
       TYPOGRAPHY TOKENS - FONT SIZES (DESKTOP)
       ============================================
       Based on Figma design system
    */
   /* Display (Hero headlines) */
   --font-size-display: 57px;
   /* Figma: 57px (was 56px in CSS - FIXED) */

   /* Headlines (Section titles) */
   --font-size-headline-xl: 48px;
   /* Why Join title */
   --font-size-headline-lg: 32px;
   /* Choose role, Early career */
   --font-size-headline-md: 28px;
   /* Benefit card titles */
   --font-size-headline-sm: 24px;
   /* Page label */

   /* Body text */
   --font-size-body-lg: 16px;
   /* Hero description, benefit text */
   --font-size-body-md: 15px;
   /* Navigation links */
   --font-size-body-sm: 14px;
   /* Smaller UI text */

   /* ============================================
       TYPOGRAPHY TOKENS - LINE HEIGHTS
       ============================================
    */
   --line-height-display: 63px;
   --line-height-headline-xl: 48px;
   --line-height-headline-lg: 40px;
   --line-height-headline-md: 36px;
   --line-height-headline-sm: 36px;
   --line-height-body: 24px;
   --line-height-body-sm: 22px;
   --line-height-base: 1.6;

   /* ============================================
       SPACING TOKENS
       ============================================
       Consistent spacing scale
    */
   --spacing-xs: 8px;
   --spacing-sm: 10px;
   --spacing-md: 15px;
   --spacing-lg: 16px;
   --spacing-xl: 24px;
   --spacing-2xl: 32px;
   --spacing-3xl: 40px;
   --spacing-4xl: 64px;

   /* Component-specific spacing */
   --spacing-section-vertical: 64px;
   --spacing-section-horizontal: 40px;
   --spacing-card-gap: 15px;
   --spacing-button-padding-v: 15px;
   --spacing-button-padding-h: 25px;
   --spacing-nav-gap: 20px;

   /* ============================================
       LAYOUT TOKENS
       ============================================
    */
   --layout-max-width: 1288px;
   /* Max content width */
   --layout-content-padding: 40px;
   --layout-nav-height: 56px;
   --layout-hero-height: 522px;

   /* ============================================
       Z-INDEX SCALE
       ============================================
    */
   --z-index-sticky-nav: 100;
   /* Lowered to stay under site header */
   --z-index-dropdown: 9999;
   --z-index-modal: 10000;

   /* ============================================
       BORDER & SHADOW TOKENS
       ============================================
    */
   --border-width-thin: 1px;
   --border-width-thick: 2px;
   --border-width-focus: 4px;

   --box-shadow-dropdown: 0 4px 8px rgba(0, 0, 0, 0.1);

   /* ============================================
       TRANSITION TOKENS
       ============================================
    */
   --transition-fast: 0.1s ease;
   --transition-normal: 0.2s ease;
   --transition-slow: 0.3s ease;

   /* ============================================
       OPACITY TOKENS
       ============================================
    */
   --opacity-hero-image: 0.75;
   --opacity-overlay: 0.85;
   --opacity-hover: 0.05;
   --opacity-hover-strong: 0.08;

   /* ============================================
       BREAKPOINTS (for reference in media queries)
       ============================================
       Note: CSS custom properties can't be used directly in @media queries,
       but documenting them here for consistency
    */
   --breakpoint-mobile: 346px;
   --breakpoint-small-tablet: 765px;
   --breakpoint-tablet: 991px;
   --breakpoint-desktop: 992px;
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================
   Respect user's motion preferences
*/
@media (prefers-reduced-motion: reduce) {
   :root {
      --transition-fast: 0.01ms;
      --transition-normal: 0.01ms;
      --transition-slow: 0.01ms;
   }

   * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}