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

/* This will contain the global colors and values of our app */
:root {
	color-scheme: light;
	/* 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, 0.15);
	--batterii-purple-faded: rgba(95, 77, 255, 0.15);
	--batterii-red-faded: rgba(244, 49, 49, 0.15);
	--batterii-white-faded: rgba(255, 255, 255, 0.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, 0.1);
	--batterii-black-2: rgba(0, 0, 0, 0.2);
	--batterii-black-5: rgba(0, 0, 0, 0.5);
	--batterii-black-8: rgba(0, 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-28: 28px;
	--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;

	/* Volt */
	--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: var(--gray-modern-500);
	--color-scrollbar-track: transparent;

	/* Brand Companion Theme Colors */
	/* These are overridden by user selections on the Brand Settings page, including them here for autocompletion */

	--md-sys-color-primary: #3f5f90;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-primary-container: #d6e3ff;
	--md-sys-color-on-primary-container: #254777;
	--md-sys-color-primary-dim: #325383;
	--md-sys-color-primary-fixed: #d6e3ff;
	--md-sys-color-on-primary-fixed: #001b3d;
	--md-sys-color-on-primary-fixed-variant: #254777;
	--md-sys-color-primary-fixed-dim: #a8c8ff;
	--md-sys-color-secondary: #555f71;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-secondary-container: #d9e3f8;
	--md-sys-color-on-secondary-container: #3e4758;
	--md-sys-color-secondary-dim: #495365;
	--md-sys-color-secondary-fixed: #d9e3f8;
	--md-sys-color-on-secondary-fixed: #121c2b;
	--md-sys-color-on-secondary-fixed-variant: #3e4758;
	--md-sys-color-secondary-fixed-dim: #bdc7dc;
	--md-sys-color-surface: #f9f9ff;
	--md-sys-color-surface-variant: #f1dee4;
	--md-sys-color-surface-dim: #d9d9e0;
	--md-sys-color-surface-bright: #f9f9ff;
	--md-sys-color-surface-container-lowest: #ffffff;
	--md-sys-color-surface-container-low: #f3f3fa;
	--md-sys-color-surface-container: #ededf4;
	--md-sys-color-surface-container-high: #e7e8ee;
	--md-sys-color-surface-container-highest: #e2e2e9;
	--md-sys-color-on-surface: #191c20;
	--md-sys-color-on-surface-variant: #43474e;
	--md-sys-color-tertiary: #6f5675;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-tertiary-container: #f9d8fe;
	--md-sys-color-on-tertiary-container: #563e5c;
	--md-sys-color-tertiary-dim: #624a69;
	--md-sys-color-tertiary-fixed: #f9d8fe;
	--md-sys-color-on-tertiary-fixed: #28132f;
	--md-sys-color-on-tertiary-fixed-variant: #563e5c;
	--md-sys-color-tertiary-fixed-dim: #dcbce1;
	--md-sys-color-background: #f9f9ff;
	--md-sys-color-on-background: #191c20;
	--md-sys-color-inverse-surface: #2e3035;
	--md-sys-color-inverse-on-surface: #f0f0f7;
	--md-sys-color-inverse-primary: #a8c8ff;
	--md-sys-color-outline: #74777f;
	--md-sys-color-outline-variant: #c4c6cf;
	--md-sys-color-error-dim: #a80710;
	--md-sys-color-on-error-container: #93000a;
	--md-sys-color-shadow: #000000;
	--md-sys-color-scrim: #000000;

	/* Input element filters */
	--input-calendar-picker-filter: invert(0) brightness(0.5);
	--max-zindex: 1000000;
}
/* global overrides */
html {
	box-sizing: border-box;
	font-size: 10px;
	font-family: "Inter", batterii-brand, sans-serif;
	height: 100vh;
	background-color: var(--color-background);

	/* 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;
	background-color: var(--color-background);

	/* 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%;
	}
}
@layer base, components, features;
@layer base {
	b,
	strong {
		font-weight: 600;
	}
	#root {
		height: 100%;
		background-color: var(--color-background);
	}

	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-scheme: dark;
	--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);
	--color-scrollbar-thumb-hover: var(--charcoal-elevation-200);
	--color-scrollbar-track: transparent;

	/* Input element filters */
	--input-calendar-picker-filter: invert(1) brightness(1.2);
}

html.guest-mode {
	--guest-mode-color-background: var(--md-sys-color-secondary-container);
	--color-text-body: var(--md-sys-color-on-surface);
	--color-text-secondary: var(--md-sys-color-on-surface-variant);
	--color-text-tertiary: var(--md-sys-color-outline);

	--color-background: var(--md-sys-color-background);
	--color-background-secondary: var(--md-sys-color-surface-container);
	--color-background-old: var(--md-sys-color-background);
	--color-card-background: var(--md-sys-color-surface-container-low);
	--color-border-container: var(--md-sys-color-outline-variant);
	--color-border: var(--md-sys-color-outline);
	--color-border-hover-brand: var(--md-sys-color-primary-container);
	--color-modal-background: var(--md-sys-color-surface);
	--color-background-element: var(--md-sys-color-surface-container-lowest);
	--color-text-card: var(--md-sys-color-primary);
	--color-border-soft: var(--md-sys-color-surface-variant);

	--color-brand: var(--md-sys-color-primary);
	--color-brand-purple: var(--md-sys-color-primary);

	--color-navigation-background: var(--md-sys-color-surface-container);
	--color-scrollbar-thumb: var(--md-sys-color-outline-variant);
	--color-scrollbar-thumb-hover: var(--md-sys-color-outline);
	--color-scrollbar-track: transparent;
	--guest-top-nav-height: 46px;
}