/*----------------------------------------------

[Theme CSS]

Theme   : Shock
Version : 1.0.0
Author  : Codings
Support : codings.dev

----------------------------------------------*/

/*----------------------------------------------

[Content Index]

1. Color
2. Theme Mode
3. Typography

----------------------------------------------*/

/*----------------------------------------------
1. Color
----------------------------------------------*/

/* #region Color */

:root {

	/* Primary */
	--shock-primary-color: #07beb8;
	--shock-primary-15-color: #07beb826;
	--shock-primary-25-color: #07beb840;
	--shock-primary-50-color: #07beb880;
	--shock-primary-75-color: #07beb8bf;

	/* Secondary */
	--shock-secondary-color: #6917d0;
	--shock-secondary-15-color: #6917d026;
	--shock-secondary-25-color: #6917d040;
	--shock-secondary-50-color: #6917d080;
	--shock-secondary-75-color: #6917d0bf;

	/* Tertiary */
	--shock-tertiary-color: #ff1791;
	--shock-tertiary-15-color: #ff179126;
	--shock-tertiary-25-color: #ff179140;
	--shock-tertiary-50-color: #ff179180;
	--shock-tertiary-75-color: #ff1791bf;

	/* Auxiliary */
	--shock-accent-color: #fedc00;
	--shock-success-color: #007a4d;
	--shock-danger-color: #e63946;

	/* White */
	--shock-white-color: #ffffff;
	--shock-white-10-color: #ffffff1a;
	--shock-white-25-color: #ffffff40;
	--shock-white-50-color: #ffffff80;
	--shock-white-65-color: #ffffffa6;
	--shock-white-75-color: #ffffffbf;
	--shock-white-85-color: #ffffffd9;

	/* Gray */	
	--shock-gray-color: #8f93a5;
	--shock-gray-10-color: #8f93a51a;
	--shock-gray-25-color: #8f93a540;
	--shock-gray-50-color: #8f93a580;
	--shock-gray-65-color: #8f93a5a6;
	--shock-gray-75-color: #8f93a5bf;
	--shock-gray-85-color: #8f93a5d9;

	/* Black */
	--shock-black-color: #1a1a20;
	--shock-black-10-color: #1a1a201a;
	--shock-black-25-color: #1a1a2040;
	--shock-black-50-color: #1a1a2080;
	--shock-black-65-color: #1a1a20a6;
	--shock-black-75-color: #1a1a20bf;
	--shock-black-85-color: #1a1a20d9;
}

/* #endregion Color */

/*----------------------------------------------
2. Theme Mode
----------------------------------------------*/

/* #region Theme Mode */

:root .scheme-light {
	--color-1: var(--shock-white-color);
	--color-2: var(--shock-black-color);
	--color-3: var(--shock-gray-25-color);
}

:root .scheme-dark {
	--color-1: var(--shock-black-color);
	--color-2: var(--shock-white-color);
	--color-3: var(--shock-gray-10-color);
}

.shock-body {
	background-color: var(--color-1);
	font-family: var(--shock-primary-font);
	color: var(--shock-gray-color);
}

.shock-body .shock-scheme .scheme-color,
.shock-body .shock-main .scheme-color {
	color: var(--color-2);
}

.shock-body .shock-scheme .scheme-link-color,
.shock-body .shock-main .scheme-link-color {
	color: var(--color-2);
}

.shock-body .shock-scheme .scheme-link-color:hover,
.shock-body .shock-main .scheme-link-color:hover {
	color: var(--color);
}

.shock-body .shock-scheme .scheme-bg-color,
.shock-body .shock-main .scheme-bg-color {
	background-color: var(--color-2);
}

/* #endregion Theme Mode */

/*----------------------------------------------
3. Typography
----------------------------------------------*/

/* #region Typography */

:root {
	--shock-primary-font: Lato, sans-serif;
	--shock-secondary-font: Proxima Nova, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1.5rem;
	font-family: var(--shock-secondary-font);  
  line-height: 1.2;
	color: var(--color-2);
}

h1 { font-size: 4.5rem; font-weight: 800; }
h2 { font-size: 2.2rem; font-weight: 800; }
h3 { font-size: 1.75rem; font-weight: 700; }
h4 { font-size: 1.5rem; font-weight: 700; }
h5 { font-size: 1.2rem; font-weight: 700; }
h6 { font-size: 1rem; font-weight: 700; }

@media (max-width: 767px) {
	h1 { font-size: 3rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
	h4 { font-size: 1.2rem; }
	h5 { font-size: 1.1rem; }
	h6 { font-size: 1rem; }
}

.text-style-1, 
.text-style-2, 
.text-style-3, 
.text-style-4, 
.text-style-5, 
.text-style-6, 
.text-style-7, 
.text-style-8 {
	font-family: var(--shock-secondary-font);  
	line-height: 1.2;
}

.text-style-1 { font-size: 6.2rem; font-weight: 800; }
.text-style-2 { font-size: 5.2rem; font-weight: 800; }
.text-style-3 { font-size: 4.2rem; font-weight: 800; }
.text-style-4 { font-size: 4.2rem; font-weight: 100; }
.text-style-5 { font-size: 3.2rem; font-weight: 800; }
.text-style-6 { font-size: 3.2rem; font-weight: 100; }
.text-style-7 { font-size: 2.2rem; font-weight: 700; }
.text-style-8 { font-size: 2.2rem; font-weight: 100; }
.text-style-9 { font-size: 1.75rem; font-weight: 700; }
.text-style-10 { font-size: 1.75rem; font-weight: 100; }
.text-style-11 { font-size: 1.2rem; font-weight: 700; }
.text-style-12 { font-size: 1.2rem; font-weight: 400; }

@media (max-width: 767px) {
	.text-style-1 { font-size: 3rem; }
	.text-style-2 { font-size: 3rem; }
	.text-style-3 { font-size: 3rem; }
	.text-style-4 { font-size: 3rem; }
	.text-style-5 { font-size: 2.2rem; font-weight: 700; }
	.text-style-6 { font-size: 2.2rem; }
	.text-style-7 { font-size: 1.75rem; }
	.text-style-8 { font-size: 1.75rem; }	
	.text-style-9 { font-size: 1.5rem; }
	.text-style-10 { font-size: 1.5rem; }
	.text-style-11 { font-size: 1.2rem; }
	.text-style-12 { font-size: 1rem; }
}

p {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

p:last-child {
	margin-bottom: 0;
}

b,
strong {
  font-weight: 700;
	filter: brightness(0.75);
}

small, .small {
  font-size: 0.85rem;
}

body {
	width: 100%;
	height: 100%;
  margin: 0;
	font-family: var(--shock-primary-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

/* #endregion Typography */