:root {
    --brand-primary: #00DDFF;
    
    --cool-gray-900: #080911;
    --cool-gray-800: #121926;
    --cool-gray-700: #253341;
    --cool-gray-600: #364152;
    --cool-gray-500: #4a5464;
    --cool-gray-400: #94A3B8;
    --cool-gray-300: #D1D4DB;
    --cool-gray-200: #ECEFF4;
    --cool-gray-100: #F2F2F3;
    --cool-gray-50: #fbfbfb;

    --true-gray-900: #000;
    --true-gray-800: #141414;
    --true-gray-700: #404040;
    --true-gray-600: #525252;
    --true-gray-500: #737373;
    --true-gray-400: #9e9e9e;
    --true-gray-300: #D4D4D4;
    --true-gray-200: #E5E5E5;
    --true-gray-100: #f0f0f0;
    --true-gray-0: #fff;
    --true-gray-half-white: #ffffff80;

    --warm-gray-900: #171412;
    --warm-gray-800: #292524;
    --warm-gray-700: #363431;
    --warm-gray-600: #57534D;
    --warm-gray-500: #78716C;
    --warm-gray-400: #b1aca8;
    --warm-gray-300: #D6D3D1;
    --warm-gray-200: #E7E5E4;
    --warm-gray-100: #F5F5F4;
    --warm-gray-50: #FAFAF9;
    

    --teal-900: #033543;
    --teal-800: #005D73;
    --teal-700: #077B9B;
    --teal-600: #05A5C9;
    --teal-500: #00DDFF;
    --teal-400: #4CD0F8;
    --teal-300: #85E0FA;
    --teal-200: #AFECF8;
    --teal-100: #E3FBFF;
    --teal-50: #F5FDFF;
    
    --purple-900: #360861;
    --purple-800: #531E90;
    --purple-700: #6B29DF;
    --purple-600: #8415EF;
    --purple-500: #A04DFD;
    --purple-400: #B081FB;
    --purple-300: #DBBEFF;
    --purple-200: #EFD8FF;
    --purple-100: #F4EBFF;
    --purple-50: #F8F4FD;
    
    --red-900: #460809;
    --red-800: #55160C;
    --red-700: #9F0712;
    --red-600: #E7000B;
    --red-500: #F04438;
    --red-400: #FF6467;
    --red-300: #FBA5A4;
    --red-200: #FFC9C9;
    --red-100: #FFC9C9;
    --red-50: #FFFBFB;
  
    --text-nav-ul-li-a: var(--warm-gray-500);
    --text-nav-ul-li-a-darker: var(--warm-gray-700);
    --text-nav-cta: var(--cool-gray-900);

    --text-s-01-page-title-h1: var(--warm-gray-900);
    --text-s-01-page-title-p: var(--cool-gray-500);

    --text-s-02-product-goal-h3: var(--cool-gray-700);
    --text-s-02-product-goal-caption: var(--teal-700);
    --text-s-02-product-goal-details-p: var(--cool-gray-500);
    --text-s-02-product-goal-reasons: var(--warm-gray-600);

    --text-audience: var(--cool-gray-300);

    --text-s-04-caption: var(--warm-gray-500);
    --text-s-04-h2: var(--cool-gray-700);
    --text-s-04-p: var(--cool-gray-500);
    --text-s-04-product-goal-details-p: var(--cool-gray-500);
    --text-s-04-product-goal-reasons: var(--warm-gray-600);

    --text-s-06-img-wrapper-p: var(--warm-gray-400);

    --text-footer-p-or-ul: var(--true-gray-400);


    --states-danger: var(--red-500);
    --states-total-white: var(--true-gray-0);
    --states-total-black: var(--true-gray-900);
    
    --surface-body-bg: var(--true-gray-0);
    --surface-nav: var(--true-gray-half-white);
    --surface-cta: var(--teal-500);
    --surface-ul: var(--states-total-white);
    --surface-icon-bg: var(--cool-gray-100);
    --surface-default-bg: var(--cool-gray-100);
    --surface-s1-bg: var(--cool-gray-00);
    --surface-s4-bg: var(--true-gray-0);
    --surface-dark-bg: var(--cool-gray-700);
    --surface-teal-bg: var(--teal-100);
    --surface-purple-bg: var(--purple-200);
    --surface-danger: var(--red-50);
    --surface-footer: var(--cool-gray-700);
    --surface-overlay: hsla(217, 18%, 65%, 0.9);



    --border-danger: var(--red-300);
    --border-divs-wrapper: var(--true-gray-500);
    --border-ul-li: hsla(224, 72%, 4%, 0.05);
    --border-nav-logo-img: var(--cool-gray-300);
    --border-nav-icon: var(--cool-gray-400);
    --border-audience: var(--purple-500);
    --border-old-ropas-wrapper: var(--cool-gray-100);


    --secondary-text-color: var(--true-gray-400);
    --white-color: var(--true-gray-0);
    --cta-color: var(--teal-500);
    --case-study-bg: var(--cool-gray-300);
    --secondary-text-size: 14px;
    --border-radius: 4px;
    --video-wrapper-width: 380px;
    --video-wrapper-height: 320px;
    --footer-color: var(--cool-gray-50);
    --text-highlight-color: var(--teal-500);
}
.dark-mode {
    --text-nav-ul-li-a: var(--warm-gray-400);
    --text-nav-ul-li-a-darker: var(--warm-gray-400);
    --text-nav-cta: var(--cool-gray-900);

    --text-s-01-page-title-h1: var(--true-gray-0);
    --text-s-01-page-title-p: var(--warm-gray-400);

    --text-s-02-product-goal-h3: var(--warm-gray-300);
    --text-s-02-product-goal-caption: var(--teal-700);
    --text-s-02-product-goal-details-p: var(--warm-gray-400);
    --text-s-02-product-goal-reasons: var(--warm-gray-300);

    --text-audience: var(--cool-gray-300);

    --text-s-04-caption: var(--warm-gray-500);
    --text-s-04-h2: var(--cool-gray-300);
    --text-s-04-p: var(--warm-gray-500);
    --text-s-04-product-goal-details-p: var(--cool-gray-500);
    --text-s-04-product-goal-reasons: var(--warm-gray-600);

    --text-s-06-img-wrapper-p: var(--warm-gray-400);

    --text-footer-p-or-ul: var(--cool-gray-400);


    --states-danger: var(--red-800);
    --states-total-white: var(--true-gray-0);
    --states-total-black: var(--true-gray-900);
    
    --surface-body-bg: var(--warm-gray-900);
    --surface-nav: var(--warm-gray-800);
    --surface-cta: var(--teal-500);
    --surface-ul: var(--warm-gray-800);
    --surface-icon-bg: var(--warm-gray-700);
    --surface-default-bg: var(--cool-gray-100);
    --surface-s1-bg: var(--warm-gray-700);
    --surface-s4-bg: var(--warm-gray-700);
    --surface-dark-bg: var(--cool-gray-700);
    --surface-teal-bg: var(--teal-100);
    --surface-purple-bg: var(--purple-200);
    --surface-danger: var(--red-50);
    --surface-footer: var(--cool-gray-700);
    --surface-overlay: hsla(0, 3%, 7%, 0.9);


    --border-danger: var(--red-700);
    --border-divs-wrapper: var(--true-gray-500);
    --border-ul-li: rgb(49, 44, 43);
    --border-nav-logo-img: var(--cool-gray-300);
    --border-nav-icon: var(--cool-gray-400);
    --border-audience: var(--purple-500);
    --border-old-ropas-wrapper: var(--cool-gray-100);

}

/* Fallback for browsers with variable font support */
@supports (font-variation-settings: normal) {
  :root { font-family: 'Inter var', sans-serif; }
}


/* Global styles 
-----------------------------------------------*/

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.6rem;
    background-color: var(--surface-body-bg); 
    margin: 0;
}
body * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


::selection {
    background-color: var(--text-highlight-color);
  }