@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  box-sizing: border-box;
}

/**
 * ==========================================================================
 * DESIGN SYSTEM TOKENS
 * Project: Kelly Santos Portfolio
 * ==========================================================================
 */
                 
:root {

/* 1. COLORS */
/* --- Primitives (Base Palette) --- */
/* Neutrals & Grays */
--gray-25: hsl(0, 0%, 99.5%);    
--gray-50: hsl(0, 0%, 98%);     /*ultra-light-neutral-gray, very-light-shade-blue-magenta, very-light-shade-gray */
--gray-100: hsl(340, 27%, 98%);    /*very-light-shade-red */
--gray-200: hsl(231, 15%, 91%);    /*light-shade-blue-magenta */
--gray-300: hsl(108, 6%, 83%);    /*light-shade-green-cyan */
--gray-500: hsl(230, 3%, 40%);    /*medium-dark-shade-gray */
--gray-800: hsl(236, 13%, 21%);    /*dark-shade-gray */
--gray-900: hsl(235, 28%, 8%);    /*dark-desaturate-blue-gray */
--white: hsl(0, 0%, 100%);

/* Blues */
--blue-15: hsl(240, 11%, 93%);    
--blue-25: hsl(240, 10%, 96%);     /*very-light-shade-blue-magenta-darken */
--blue-50: hsl(231, 39%, 93%);     /*light-shade-blue */
--blue-100: hsl(240, 28%, 95%);    /*very-light-shade-blue */

--blue-200: #eff1f6;    /*very-light-shade-cyan-blue */
--blue-250: #e2e6ee;    
--blue-300: hsl(231, 14%, 80%);    /*light-shade-cyan-blue */
--blue-400: hsl(233, 30%, 89%);    /*very-light-shade-orange */
--blue-500: hsl(234, 40%, 50%);    /*medium-dark-shade-cyan-blue */
--blue-600: hsl(205, 74%, 38%);    /*shade-cyan-blue */
/* --blue-650: #2E446F;  */
 /* --blue-650: #2750A2; */
/* --blue-650: #1748ab;  */
--blue-650:#004991;
--blue-900: #282B43;    /*deep-near-black-shade-navy-blue, very-dark-shade-blue */

/* Slates */
--slate-700: #535468; /* medium dark shade of blue*/

/* Browns / Warms */
--brown-50: #F0EAE5;    /*very-light-shade-brown */
--brown-200: #E5E2E1;   /*very-light-shade-red-orange */
--brown-500: #FFB24D;   /*medium-light-shade-brown */

/* Greens */
--green-50: hsl(144, 28%, 93%);    /*very-light-shade-green-cyan */
--green-100: hsl(75, 20%, 96%);   /*light-shade-yellow-green */

/* Reds */
--red-500: #FB5061;     /*medium-light-shade-red */

/* 26 web-safe link-contrast colors pass at 3:1 vs black and 5:1 vs. white */

/* Reds & Pinks */

--link-red-dark: #CC0000;
--link-red-pink: #CC0033;
--link-magenta: #CC0066;
--link-deep-pink: #CC0099;
--link-red-orange: #CC3300;
--link-soft-red: #CC3333;

/* Purples & Violets */

--link-purple-deep: #9900CC;
--link-violet-dark: #6600FF;
--link-violet: #9900FF;
--link-purple-pink: #993366;
--link-purple: #993399;
--link-purple-light: #9933CC;
--link-brand-blue: #3333FF;
--link-indigo: #6633FF;

/* Greens & Earth Tones */

--link-green-olive: #336600;
--link-olive: #666600;
--link-green-muted: #336633;
--link-khaki-muted: #666633;

/* Blues, Teals & Greys */

--link-teal-dark: #006666;
--link-teal-muted: #336666;
--link-grey: #666666;
--link-blue-teal: #006699;
--link-blue-muted: #336699;
--link-blue-grey: #666699;
--link-blue-deep: #0066CC;
--link-blue-royal: #3366CC;

/* 2. SEMANTIC TOKENS */
  /* Layout & Page Canvas Backdrops */

  /* Body background */
  --bg-body-dark: var(--blue-900);            
  --bg-body-light: var(--gray-50);            
  --bg-body-mobile: var(--blue-50); 
    --bg-body-x-light: var(--gray-25);          

  /* Main background */
  --bg-main-dark: var(--blue-900);            
  --bg-main-light: var(--gray-50);    
    --bg-main-x-light: var(--white);               
  --bg-main-mobile: var(--blue-50);    
    --bg-main-secondary-light: var(--blue-200); 

  /* Section background */
  --bg-section-primary-dark: var(--blue-900);            
  --bg-section-primary-light: var(--gray-50);            
  --bg-section-secondary-light: var(--blue-200); 

    --bg-section-primary-x-light: var(--white);     

    /* Article background */
  --bg-article-primary-dark: var(--blue-900);            
  --bg-article-primary-light: var(--gray-50);            
  --bg-article-secondary-light: var(--blue-200); 
  
  /* div background */
  --bg-div-primary-dark: var(--blue-900);            
  --bg-div-primary-light: var(--gray-50);            
  --bg-div-secondary-light: var(--blue-200); 
    --bg-div-tertiary-light: var(--blue-250); 
    --bg-div-quaternary-light: var(--blue-300); 
    --bg-div-fiftnary-light: var(--link-teal-muted); 
  
  /* Banner background */
  --bg-banners-primary-dark: var(--blue-900);            
  --bg-banners-primary-light: var(--gray-50); 
  --bg-banners-secondary-dark: var(--blue-900);            
  --bg-banners-secondary-light: var(--blue-200);   
  --bg-banners-primary-x-light: var(--white);   
  --bg-banners-tertiary-light: var(--gray-200); 
    --bg-banners-quaternary-light: var(--gray-200); 

  /* cards background */
  --bg-cards-primary-dark: var(--blue-900);            
  --bg-cards-primary-light: var(--gray-50); 
  --bg-cards-primary-x-light: var(--white); 
  --bg-cards-secondary-dark: var(--blue-900);            
  --bg-cards-secondary-light: var(--blue-200);   
 
  /* navigation */
  --bg-header: var(--gray-50); 
  --bg-bottom-navigation-light: var(--gray-50); 
  --bg-footer-light: var(--gray-50);   
  --bg-footer-medium: var(--blue-50);    
  --bg-footer-dark: var(--gray-900); 
  --bg-footer-blue-light: var(--blue-200);   

  /*breadcrumbs */             
  --bg-navigation-primary-light: var(--gray-200);              
  --bg-navigation-secondary-light: var(--blue-200);  

  /* icons */
  --icon-dark: var(--blue-900);            
  --icon-light: var(--gray-50);    
  
    --icon-x-light: var(--white);      
  --icon-gray: var(--gray-500);     
  --icon-blue: var(--blue-650);     
  --icon-blue-active: var(--blue-650);     

  /* component*/
  --surface-component-light: var(--gray-50);           
  --surface-component-dark: var(--blue-900);          
  --component-dark: var(--blue-900);          
  --bg-component-primary-light: var(--gray-50); 
  --bg-component-primary-green: var(--gray-300); 
  --component-dark-secondary: var(--blue-600); 
  --bg-component-secondary-green: var(--gray-100); 
  --bg-component-secondary-light: var(--blue-25); 
  --bg-component-secondary-dark: var(--blue-300); 
  --bg-component-tertiary-light: var(--blue-200); 
  --bg-component-primary-brown: var(--brown-50); 
  --bg-component-secondary-brown: var(--brown-500); 
  --bg-component-tertiary-brown: var(--brown-200); 
  --bg-component-quinary-light: var(--gray-100); 
  --bg-component-blue-light: var(--blue-250); 
     --bg-component-blue-active: var(--link-blue-muted);    
     
  /* Typography Hierarchy */

  /* Major editorial page headings and case study titles */
    --text-title-primary-dark: var(--gray-900); 
    --text-title-secondary-dark: var(--blue-900);             
    --text-title-light: var(--gray-50);    
        --text-title-primary-blue: var(--blue-800); 

    /* Core body paragraphs, list details, table content */
    --text-main-dark: var(--blue-900);   
        --text-main-dark: var(--blue-800);               
    --text-main-light: var(--gray-50);  
    --text-x-light: var(--white);              
    --text-main-gray: var(--gray-500);     
    --text-main-primary-dark: var(--gray-900);     
    --text-main-secondary-dark: var(--blue-900); 
    --text-highlighted-blue: var(--blue-600);/* text highlighted */
    --text-highlighted-red: var(--red-500);/* text highlighted */

    /* anchor */
    --text-anchor-dark: var(--blue-900);          
    --text-anchor-light: var(--gray-50);    
    --text-anchor--x-light: var(--white);            
    --text-anchor-gray: var(--gray-500);  
    --text-anchor-dark-secondary: var(--gray-800);        
    --text-anchor-blue: var(--blue-650);/* text highlighted */

     --text-anchor-blue-muted: var(--link-blue-muted);   
     --text-anchor-purple-light: var(--link-purple-light ); 
  /* text ? */  
  --text-muted: var(--gray-500);           /* Captions, metadata timelines, dates, breadcrumbs, copyrights */
  --text-link: var(--blue-600);            /* Active inline text hyperlinks or action arrows */
  --text-inverse: var(--white);            /* Content resting over dark headers or dark action buttons */


  /* Action Elements & Navigation Controls */

  /* Backgrounds Action Elements & Navigation Controls */
  --action-primary-bg-dark: var(--blue-900);    /* Solid button background (Contact CTA, Search submit button) */
  --action-primary-bg-gray: var(--gray-50);    /* Solid button background (Contact CTA, Search submit button) */
  --action-primary-bg-active: var(--blue-900);    /* Solid button background (Contact CTA, Search submit button) */
  --action-tertiary-bg-active: var(--blue-300);    /* Solid button background (Contact CTA, Search submit button) */
  --action-primary-bg-x-light: var(--white);    /* Solid button background (Contact CTA, Search submit button) */
  --action-tertiary-bg-light: var(--blue-200);    /* Solid button background (Contact CTA, Search submit button) */
--action-primary-bg-slate: var(--slate-700);    /* Solid button background (Contact CTA, Search submit button) */
  /* States Action Elements & Navigation Controls */
  --action-search-fill: var(--white);      /* Inside background fill for search pill text fields */
  --action-item-hover: var(--blue-200);    
  
  /* Soft background lists */
  --action-item-primary-dark: var(--blue-900);     
  --action-item-primary-light: var(--gray-50);     
  --action-item-primary-gray: var(--gray-500);     
  --action-item-secondary-light: var(--blue-200); 
  --action-item-quaternary-light: var(--blue-50);      

  /* Borders, Lines & Grid Framing */
  
  /* Borders body */
  --border-body-dark: var(--blue-900);            /* Body background */
  --border-body-light: var(--gray-50);            /* Body background */
  --border-body-mobile: var(--blue-50);            /* Body background small devices */
  
  /* Borders navigation */
  --border-header-dark:  var(--blue-900);     
  --border-header: var(--gray-50);              
  --border-header-mobile: var(--blue-50);            
  --border-bottom-navigation-light: var(--gray-50);              
      

  /* Section Borders, Lines & Grid Framing */
  --border-section-primary-light: var(--gray-50);  
  --border-section-secondary-light: var(--blue-200);    
  --border-section-secondary-dark: var(--blue-400);        
  --border-section-secondary-light-hover: var(--blue-200);  
  

  /* Banner Borders */
  --border-banner-primary-light: var(--gray-50);  
  --border-banner-secondary-light: var(--blue-200);   
  --border-banner-secondary-dark: var(--blue-400);        
  --border-banner-secondary-light-hover: var(--blue-200);  
  --border-banner-tertiary-light: var(--blue-200);  

  /* div Border*/
  --border-div-primary-dark: var(--blue-900);   
  --border-div-primary-light: var(--gray-50);    
  --border-div-item-light: var(--blue-300);  
--border-div-primary-brown: var(--brown-200);    

  /* Card's Border, Lines & Grid Framing */
  --border-card-secondary-light: var(--blue-200);  
    --border-card-primary-x-light: var(--white);  

  --border-light: var(--gray-100);         /* Ultra-faint separating layout lines */
  --border-card: var(--gray-200);          /* Structural container cards, sticky sidebars, panel limits */
  --border-grid: var(--blue-100);          /* Inner layout dividers inside tables and research matrices */
  --border-input: var(--gray-900);         /* High-visibility bounding outline around active text inputs */
  --border-focus: var(--blue-500);         /* Vibrant accessibility outline for focused interactive elements */
  
  /* Component's Border*/
  --border-component-item-light: var(--blue-300); 

  --border-component-primary-dark: var(--blue-900);   
  --border-component-primary-light: var(--gray-50); 
  --border-component-primary-green: var(--gray-300); 
  --border-component-primary-brown: var(--brown-50); 
  --border-component-primary-red: var(--red-500); 
   --border-component-secondary-blue: var(--blue-650);

  --border-component-secondary-light: var(--blue-25); 
  --border-component-secondary-dark: var(--blue-400); 
  --border-component-secondary-green: var(--gray-100); 
  --border-component-dark-secondary: var(--blue-600); 
  --border-component-secondary-brown: var(--brown-500); 

  --border-component-tertiary-brown: var(--brown-200); 
  --border-component-tertiary-light: var(--blue-200); 
  --border-component-quaternary-light: var(--blue-300); 
  --border-component-quinary-light: var(--gray-100); 

  

  /* Borders Action Elements & Navigation Controls */
  --border-action-primary-dark: var(--blue-900);   
  --border-action-primary-light: var(--gray-50); 
   --border-action-primary-gray: var(--gray-200); 
   --border-action-primary-gray-hover: var(--gray-200); 
   --border-action-item-light: var(--blue-300);  
   --border-action-secondary-light: var(--blue-200);
   --border-action-secondary-dark: var(--blue-400);   
  --border-action-primary-light-hover: var(--gray-50);     
  --border-action-secondary-light-hover: var(--blue-200);   
  --border-action-primary-dark-hover: var(--blue-900);   
  --border-action-tertiary-red-hover: var(--red-500);   
  --border-action-quaternary-light: var(--blue-50);  
   --border-action-secondary-blue: var(--blue-650);
   --border-action-blue-hover: var(--blue-650);   
   --border-blue-active: var(--link-blue-muted);     
  
 /* outlines*/
  --outline-action-primary-dark: var(--blue-900);    /* Outline (Contact CTA, Search submit button) */
  --outline-action-primary-dark-hover: var(--blue-900);    /* Outline (Contact CTA, Search submit button) */
  --outline-action-secondary-dark: var(--blue-600);    /* Outline (Contact CTA, Search submit button) */
  --outline-action-secondary-dark-hover: var(--blue-600);    /* Outline (Contact CTA, Search submit button) */

    /* Component's outlines*/
  --outline-component-primary-dark: var(--blue-900);   
  --outline-component-primary-light: var(--gray-50);    
  --outline-component-item-light: var(--blue-300);  
  --outline-component-secondary-dark-hover: var(--blue-400);   
 /* outlines-Offset*/
  --outline-offset-action-primary-dark: var(--blue-900);    /* Outline (Contact CTA, Search submit button) */
  --outline-offset-action-primary-dark-hover: var(--blue-900);    /* Outline (Contact CTA, Search submit button) */

   /* underline*/
  --underline-red: var(--red-500);    /* Outline (Contact CTA, Search submit button) */

  /* Accents, Infographics & System Status */
  --accent-brand: var(--blue-500);         /* Primary brand color for process phase indicators or tags */
  --accent-warm: var(--brown-500);          /* Secondary emphasis markers, sticky notes, or highlights */
  --accent-graphic: var(--red-500);        /* Structural graphic accents for vectors or key pain points */
  --status-error: var(--red-500);          /* Invalid form validation input rings or warning boxes */
  --status-success: var(--green-50);       /* Form confirmation message panel backdrops */
  
  /* 3. TYPOGRAPHY SCALES */
  /* Typography */
  --primary-font: "Montserrat", sans-serif;

  /* Scale: 1.067 minor second */
  --minor-second-d0: 1.913rem;
  --minor-second-d1: 1.793rem; 
  --minor-second-d2: 1.680rem;
  --minor-second-d3: 1.575rem;
  --minor-second-h1: 1.476rem;
  --minor-second-h2: 1.383rem;
  --minor-second-h3: 1.296rem;
  --minor-second-h4: 1.215rem;
  --minor-second-h5: 1.138rem;
  --minor-second-h6: 1.067rem;
  --minor-second-base: 1.000rem;
  --minor-second-sm: 0.937rem;
  --minor-second-xs: 0.878rem;
  --minor-second-xxs: 0.823rem; 

    /* Scale: 1.125 major second */
  --major-second-d0:  3.247rem;
  --major-second-d1: 2.887rem; 
  --major-second-d2: 2.566rem;
  --major-second-d3: 2.281rem;
  --major-second-h1: 2.027rem;
  --major-second-h2: 1.802rem;
  --major-second-h3: 1.602rem;
  --major-second-h4: 1.424rem;
  --major-second-h5: 1.125rem;
  --major-second-h6: 1.067rem;
  --major-second-base: 1.000rem;
  --major-second-sm: 0.889rem;
  --major-second-xs: 0.790rem;
  --major-second-xxs: 0.702rem; 

    /* Scale: 1.2  minor third) */
  --minor-third-d0: 6.192rem;
  --minor-third-d1: 5.160rem;
  --minor-third-d2: 4.300rem;
  --minor-third-d3: 3.583rem;
  --minor-third-h1: 2.986rem;
  --minor-third-h2: 2.488rem;
  --minor-third-h3: 2.074rem;
  --minor-third-h4: 1.728rem;
  --minor-third-h5: 1.440rem;
  --minor-third-h6: 1.200rem;
  --minor-third-base: 1.000rem;
  --minor-third-sm: 0.833rem;
  --minor-third-xs: 0.694rem;
  --minor-third-xxs: 0.579rem;

  /* Scale: 1.25 major third) */
  --major-third-d00: 7.740rem;
  --major-third-d0: 6.450rem;
  --major-third-d1: 5.375rem; 
  --major-third-d2: 4.479rem;
  --major-third-d3: 3.732rem;
  --major-third-h1: 3.110rem;
  --major-third-h2: 2.592rem;
  --major-third-h3: 2.160rem;
  --major-third-h4: 1.800rem;
  --major-third-h5: 1.500em;
  --major-third-h6: 1.250rem;
  --major-third-base: 1.000rem;
  --px-16: 16px;
  --major-third-sm: 0.800rem;
  --major-third-xs: 0.640rem;
  --major-third-xxs: 0.512rem; 

  /* Desktop-Scale: 1.25 major third) */
  --font-size-d0: var(--major-third-d0);
  --font-size-d1: var(--major-third-d1);
  --font-size-d2: var(--major-third-d2);
  --font-size-d3: var(--major-third-d3);
  --font-size-h1: var(--major-third-h1);
  --font-size-h2: var(--major-third-h2);
  --font-size-h3: var(--major-third-h3);
  --font-size-h4: var(--major-third-h4);
  --font-size-h5: var(--major-third-h5);
  --font-size-h6: var(--major-third-h6);
  --font-size-base: var(--major-third-base);
  --font-size-sm: var(--major-third-sm);
  --font-size-xs: var(--major-third-xs);
  --font-size-xxs: var(--major-third-xxs); 




    /* Print Typography */

  --print-font-size-h1: 2.5rem;
  /* 27.5pt - Main Title */
  --print-font-size-h2: 2.0rem;
  /* 22pt   - Section Head */
  --print-font-size-h3: 1.6rem;
  /* 17.5pt - Subsection */
  --print-font-size-h4: 1.3rem;
  /* 14.5pt - Minor Head */
  --print-font-size-h5: 1.1rem;
  /* 12pt   - Strong Label */
  --print-font-size-h6: 1.0rem;
  /* 11pt   - Bold Detail */
  --print-font-size-base: 1.0rem;
  /* 11pt   - Body Text */
  --print-font-size-sm: 0.85rem;
  /* 9.5pt  - Captions/Tables */
  --print-font-size-xs: 0.75rem;
  /* 8pt    - Fine Print */
  --print-font-size-xxs: 0.65rem;
  /* 7pt    - Minimum Legible */
/* 4. LAYOUT & EFFECTS */
  --font-weight-light: 400;
  --font-weight-base: 500;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;


  --spacing-base: 1.2rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 3.5rem;
  --spacing-xxl: 4.5rem;
  --spacing-sm: 0.6rem;
  --spacing-xs: 0.300rem;
  --spacing-xxs: 0.150rem;

  /* Padding % */
    --padding-xxl: 6.88%;
  --padding-xl: 4.25%;
  --padding-lg: 2.62%;
  --padding-medium: 3.24%;
  --padding-base: 1.62%;
  --padding-s: 1%;
  --padding-sm: 0.81%;
  --padding-xs: 0.62%;
  --padding-xxs: 0.38%;

  /* Margin % */
  --margin-xxl: 6.88%;
  --margin-xl:4.25%;   
  --margin-lg: 2.62%;
  --margin-medium: 3.24%;
  --margin-base: 1.62%;
  --margin-sm: 1%;
  --margin-xs: 0.81%;
  --margin-xxs: 0.62%;
  --margin-xxxs: 0.38%;

  /* --border radius */
  --border-radius-base: 1rem;
  --border-radius-lg: 2rem;
  --border-radius-sm: 0.5rem;
  --border-radius-xs: 0.250rem;
  --border-radius-xxs: 0.125rem;

  --transition-duration: 0.3s;

  --transition-speed: 0.2s;

  --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.2);
  --box-shadow-inset: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
  --box-shadow-g: 0 0 1px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .2);
  --box-shadow-cs: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --box-shadow-toc: 0 4px 6px rgba(0, 0, 0, 0.05);










}

@media only screen and (max-width: 1048px) {
 
  :root {
  /* RESPONSIVE OVERRIDES */
  --font-size-d0: var(--minor-third-d0);
  --font-size-d1: var(--minor-third-d1);
  --font-size-d2: var(--minor-third-d2);
  --font-size-d3: var(--minor-third-d3);
  --font-size-h1: var(--minor-third-h1);
  --font-size-h2: var(--minor-third-h2);
  --font-size-h3: var(--minor-third-h3);
  --font-size-h4: var(--minor-third-h4);
  --font-size-h5: var(--minor-third-h5);
  --font-size-h6: var(--minor-third-h6);
  --font-size-base: var(--minor-third-base);
  --font-size-sm: var(--minor-third-sm);
  --font-size-xs: var(--minor-third-xs);
  --font-size-xxs: var(--minor-third-xxs); 
}
}

@media only screen and (max-width: 768px) {
 
  :root {
  /* RESPONSIVE OVERRIDES */
  --font-size-d0: var(--minor-third-d0);
  --font-size-d1: var(--minor-third-d1);
  --font-size-d2: var(--minor-third-d3);
  --font-size-d3: var(--minor-third-d3);

  --font-size-h1: var(--major-third-h1);
  --font-size-h2: var( --major-third-h2);
  --font-size-h3: var(  --major-third-h3);
  
  --font-size-h4: var(--minor-third-h3);
  --font-size-h5: var(--minor-third-h4);
  --font-size-h6: var(--minor-third-h5);
  --font-size-base: var(--minor-third-h6);
  --font-size-sm: var(--minor-third-base);
  --font-size-xs: var(--minor-third-sm);
  --font-size-xxs: var(--minor-third-xs); 


}
}

@media only screen and (max-width: 380px) {
 
  :root {
  /* RESPONSIVE OVERRIDES */
  --font-size-d0: var(--major-second-d0);
  --font-size-d1: var(--major-second-d1);
  --font-size-d2: var(--major-second-d2);
  --font-size-d3: var(--major-second-d3);
  --font-size-h1: var(--major-second-h1);
  --font-size-h2: var(--major-second-h2);
  --font-size-h3: var(--major-second-h3);
  --font-size-h4: var(--major-second-h4);
  --font-size-h5: var(--major-second-h5);
  --font-size-h6: var(--major-second-h6);
  --font-size-base: var(--major-second-base);
  --font-size-sm: var(--major-second-sm);
  --font-size-xs: var(--major-second-xs);
  --font-size-xxs: var(--major-second-xxs); 
}
}