/**
* This file would be included at the root of our app
*/

/* This will contain the global colors and values of our app */
:root {
  /* Theme colors */
  --batterii-green: #22C581;
  --batterii-vibrant-green: #42C67E;
  --batterii-navy: #181F42;
  --batterii-navy-medium: #2b2a56;
  --batterii-navy-light: #2C366A;
  --batterii-purple: #5F4DFF;
  --batterii-red: #FF3E3E;
  --batterii-coral: #FB6A61;
  --batterii-magenta: #CE43FF;
  --batterii-yellow: #FBFF3B;
  --batterii-yellow-tip: #F8FFB3;
  --batterii-brand-yellow: #EAFF00;
  --batterii-hot-pink: #E54190;
  --batterii-light-teal: #EBF5F9;
  --batterii-medium-teal: #ACD4D0;
  --batterii-teal: #6AB4B9;

  --batterii-green-faded: rgba(34, 197, 129, .15);
  --batterii-purple-faded: rgba(95, 77, 255, .15);
  --batterii-red-faded: rgba(244, 49, 49, .15);
  --batterii-white-faded: rgba(255, 255, 255, .2);
  /* Colors from the newest wireframes (maybe won't be final?) */
  --batterii-blue: #0033FF;
  --batterii-green-two: #27AE60;
  --batterii-pale-yellow: #FFF599;

  /* diffrent opacity levels of black */
  --batterii-black-1: rgba(0, 0, 0, .1);
  --batterii-black-2: rgba(0, 0, 0, .2);
  --batterii-black-5: rgba(0, 0, 0, .5);
  --batterii-black-8: rgba(0, 0, 0, .8);

  --element-shadow: 1px 3px 4px 1px var(--batterii-grey-extralight);
  /* grayscale */
  --batterii-black: #000000;
  --batterii-black-lighter: #111111;
  --batterii-grey-extradark: #444444;
  --batterii-grey-dark: #686868;
  --batterii-grey-medium: #888888;
  --batterii-grey-light: #BBBBBB;
  --batterii-grey: #CCCCCC;
  --batterii-grey-extralight: #DDDDDD;
  --batterii-grey-white: #EEEEEE;
  --batterii-white-smoke: #F3F3F3;
  --batterii-white: #FFFFFF;
  --auth0-dark-blue: #1b1b22;

  /* Static height or width values of global elements*/
  --top-nav-height: 60px;
  --left-nav-width: 66px;
  --expanded-nav-width: 240px;
  --top-banner-height: 48px;
  --left-panel-width: 280px;
  --right-panel-width: 400px;

  /* V2 CSS Variables */

  --sidebar-width: 248px;

  /* Mobile-specific variables */
  --mobile-sidebar-width: 280px;
  --mobile-header-height: 60px;
  --mobile-touch-target: 44px;
  --mobile-safe-area-top: env(safe-area-inset-top, 0px);
  --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-area-left: env(safe-area-inset-left, 0px);
  --mobile-safe-area-right: env(safe-area-inset-right, 0px);

  /* Font family */
  --font-inter: 'Inter';

  /* Spacings */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-46: 46px;
  --space-48: 48px;
  --space-64: 64px;
  --space-74: 74px;
  --space-124: 124px;

   /* Border radius variables */
  --radius-xxs: var(--space-2);
  --radius-xs: var(--space-4);
  --radius-s: var(--space-8);
  --radius-m: var(--space-12);
  --radius-base: var(--space-16);
  --radius-l: var(--space-32);

   /* Gray */
  --gray-modern-25: #FCFCFD;
  --gray-modern-50: #F8FAFC;
  --gray-modern-100: #EEF2F6;
  --gray-modern-200: #E3E8EF;
  --gray-modern-300: #CDD5DF;
  --gray-modern-400: #9AA4B2;
  --gray-modern-500: #697586;
  --gray-modern-600: #4B5565;
  --gray-modern-700: #364152;
  --gray-modern-800: #202939;
  --gray-modern-900: #121926;

  /* Charcoal */
  --charcoal-200: #525252;
  --charcoal-300: #3B3B3B;
  --charcoal-400: #323232;
  --charcoal-500: #292929;
  --charcoal-600: #1D1D1D;
  --charcoal-700: #141414;

   /* Charcoal elevation */
  --charcoal-elevation-25: #EAEAEA;
  --charcoal-elevation-50: #BFBFBF;
  --charcoal-elevation-100: #8B8B8B;
  --charcoal-elevation-200: #767676;
  --charcoal-elevation-300: #696969;
  --charcoal-elevation-400: #545454;
  --charcoal-elevation-500: #3E3E3E;
  --charcoal-elevation-600: #363636;
  --charcoal-elevation-700: #2F2F2F;
  --charcoal-elevation-800: #2D2D2D;

  /* Purple Brand*/
  --purple-brand-25: #FAFAFF;
  --purple-brand-50: #F4F3FD;
  --purple-brand-100: #ECEAFD;
  --purple-brand-200: #DBD7FD;
  --purple-brand-300: #CDC7FE;
  --purple-brand-400: #A69CFE;
  --purple-brand-500: #5F4DFF;
  --purple-brand-600: #5546DD;
  --purple-brand-700: #4B3FBB;
  --purple-brand-800: #373077;
  --purple-brand-900: #2A274A;
  --purple-brand-950: #22202D;

  /* Blue Vurvey */
  --blue-vurvey-25: #EDEDF5;
  --blue-vurvey-50: #C8C8DE;
  --blue-vurvey-100: #B7B7CF;
  --blue-vurvey-200: #9494B1;
  --blue-vurvey-300: #717092;
  --blue-vurvey-400: #4E4D74;
  --blue-vurvey-500: #2B2A56;
  --blue-vurvey-600: #222245;
  --blue-vurvey-700: #1A1934;
  --blue-vurvey-800: #111122;
  --blue-vurvey-900: #090811;

  --yellow-25: #FEFCF0;
  --yellow-50: #FEFBE8;
  --yellow-100: #FEF1C3;
  --yellow-200: #FFEE95;
  --yellow-300: #FDE273;
  --yellow-400: #FFC91A;
  --yellow-500: #ECBE09;
  --yellow-600: #E8A808;
  --yellow-700: #C18B03;
  --yellow-800: #85510E;
  --yellow-900: #714012;

  --volt-50: #FDFFE5;
  --volt-100: #FBFFCC;
  --volt-200: #F9FFB2;
  --volt-300: #F6FF99;
  --volt-400: #F3FF52;
  --volt-500: #EAFF00;
  --volt-600: #D7EA00;
  --volt-700: #A6B500;

   /* Red */
  --red-25: #FFFBFA;
  --red-50: #FEF3F2;
  --red-100: #FEE4E2;
  --red-200: #FECDCA;
  --red-300: #FDA29B;
  --red-400: #F97066;
  --red-500: #F04438;
  --red-600: #D92D20;
  --red-700: #B42318;
  --red-800: #912018;
  --red-900: #7A271A;

  /* Pink dirty */
  --pink-dirty-25: #F8EEF0;
  --pink-dirty-50: #F2DDE1;
  --pink-dirty-100: #EBCCD3;
  --pink-dirty-200: #E5BBC4;
  --pink-dirty-300: #D79AA6;
  --pink-dirty-400: #CA7889;
  --pink-dirty-500: #BD566B;
  --pink-dirty-600: #9C4758;
  --pink-dirty-700: #7B3845;
  --pink-dirty-800: #5B2833;
  --pink-dirty-900: #3A1920;

  /* Teal */
  --teal-25: #DDFBF8;
  --teal-50: #C5F7F2;
  --teal-100: #ADF3EC;
  --teal-200: #95EFE6;
  --teal-300: #64E7DA;
  --teal-400: #34DFCE;
  --teal-500: #04D7C2;
  --teal-600: #03AC9B;
  --teal-700: #028174;
  --teal-800: #02564E;
  --teal-900: #012B27;

   /* Purple modern */
  --purple-modern-25: #FCFAFF;
  --purple-modern-50: #F9F4FF;
  --purple-modern-100: #F4E9FF;
  --purple-modern-200: #E9D2FF;
  --purple-modern-300: #DDBCFF;
  --purple-modern-400: #D2A5FF;
  --purple-modern-500: #C78FFF;
  --purple-modern-600: #8756B8;
  --purple-modern-700: #562B82;
  --purple-modern-800: #360E5F;
  --purple-modern-900: #26004D;
  --purple: #5F4DFF;

   /* Cyan */
  --cyan-25: #F5FEFF;
  --cyan-50: #ECFDFF;
  --cyan-100: #CFF9FE;
  --cyan-200: #A5F0FC;
  --cyan-300: #67E3F9;
  --cyan-400: #22CCEE;
  --cyan-500: #06AED4;
  --cyan-600: #088AB2;
  --cyan-700: #0E7090;
  --cyan-800: #155B75;
  --cyan-900: #164C63;

   /* Lime */
  --lime-25: #F9FEF3;
  --lime-50: #F2FEE5;
  --lime-100: #E3FBCC;
  --lime-200: #D0F8AB;
  --lime-300: #A6EF67;
  --lime-400: #85E13A;
  --lime-500: #66C61C;
  --lime-600: #4CA30D;
  --lime-700: #3B7C0F;
  --lime-800: #326212;
  --lime-900: #2B5314;

  /* Blue Dark */

  --blue-dark-25: #F5F8FF;
  --blue-dark-50: #EFF4FF;
  --blue-dark-100: #D1E0FF;
  --blue-dark-200: #B2CCFF;
  --blue-dark-300: #84ADFF;
  --blue-dark-400: #528BFF;
  --blue-dark-500: #2970FF;
  --blue-dark-600: #155EEF;
  --blue-dark-700: #004EEB;
  --blue-dark-800: #0040C1;
  --blue-dark-900: #00359E;

  /* Yellow */

  --yellow-25: #FEFCF0;
  --yellow-50: #FEFBE8;
  --yellow-100: #FEF1C3;
  --yellow-200: #FFEE95;
  --yellow-300: #FDE273;
  --yellow-400: #FFC91A;
  --yellow-500: #ECBE09;
  --yellow-600: #E8A808;
  --yellow-700: #C18B03;
  --yellow-800: #85510E;
  --yellow-900: #714012;

  /* Social */
  --color-tiktok: #FE2858;
  --color-tiktok-secondary: #692937;

  --color-reddit: #FF4500;
  --color-reddit-secondary: #7A1F00;

  --color-linkedin: #0173B2;
  --color-linkedin-secondary: #1D3F52;

  --color-youtube: #FF0000;
  --color-youtube-secondary: #850000;

  --color-x-twitter: #000000;
  --color-x-twitter-secondary: #1F1F1F;

  --color-instagram: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
  --color-instagram-secondary: #5851DB;

  --color-text-body: var(--gray-modern-900);
  --color-text-secondary: var(--gray-modern-700);
  --color-text-tertiary: var(--gray-modern-600);

  --color-background: var(--gray-modern-100);
  --color-background-secondary: var(--gray-modern-200);
  --color-background-old: var(--gray-modern-50);
  --color-card-background: var(--gray-modern-50);
  --color-border-container: var(--gray-modern-200);
  --color-border: var(--gray-modern-300);
  --color-border-hover-brand: var(--blue-vurvey-100);
  --color-modal-background: var(--gray-modern-50);
  --color-background-element: var(--gray-modern-50);
  --color-text-card: var(--purple-brand-700);
  --color-border-soft: var(--gray-modern-100);

  --color-brand: var(--purple-brand-500);
  --color-brand-purple: var(--purple-brand-500);

  --color-navigation-background: var(--gray-modern-200);
	--color-scrollbar-thumb: var(--gray-modern-300);
  --color-scrollbar-thumb-hover: #555;
}
/* global overrides */
html {
  box-sizing: border-box;
  font-size: 10px;
  font-family: 'Inter', batterii-brand, sans-serif;
  height: 100vh;

  /* Mobile: Prevent horizontal scrolling */
  @media (max-width: 779px) {
    overflow-x: hidden;
  }
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
  border: 0;
	height: 100vh;

	/* Mobile: Prevent horizontal scrolling and improve touch scrolling */
	@media (max-width: 779px) {
	  overflow-x: hidden;
	  -webkit-overflow-scrolling: touch;
	  /* Prevent zoom on input focus in iOS */
	  -webkit-text-size-adjust: 100%;
	}
}

b, strong {
  font-weight: 600;
}
#root {
	height: 100%;
}

h1 {
  font-weight: 500;
  font-size: 3.2rem;
  line-height: 4rem;

  /* Mobile: Smaller heading sizes */
  @media (max-width: 779px) {
    font-size: 2.4rem;
    line-height: 3rem;
  }
}
h2 {
  font-size: 2.1rem;
  line-height: 2.4rem;
  font-weight: 600;

  /* Mobile: Smaller heading sizes */
  @media (max-width: 779px) {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
}

p {
  margin: 0;
}


html.dark-theme {
  --color-text-body: var(--charcoal-elevation-25);
  --color-text-secondary: var(--charcoal-elevation-50);
  --color-text-tertiary: var(--charcoal-elevation-100);

  --color-background: var(--charcoal-600);
  --color-background-secondary: var(--charcoal-700);
  --color-background-old: var(--charcoal-600);
  --color-card-background: var(--charcoal-elevation-800);
  --color-border-container: var(--charcoal-elevation-500);
  --color-border: var(--charcoal-elevation-400);
  --color-border-hover-brand: var(--charcoal-elevation-400);
  --color-modal-background: var(--charcoal-500);
  --color-text-card: var(--purple-brand-300);
  --color-border-soft: var(--charcoal-elevation-600);

  --color-brand: var(--volt-500);
  --color-brand-purple: var(--purple-brand-400);

  --color-navigation-background: var(--charcoal-700);
	--color-scrollbar-thumb: var(--charcoal-elevation-400);
}