File: /mnt/data/dreamssalon-wp-market/wp-content/themes/dreamsalon/assets/scss/_variables.scss
/*============================
1. Typography
============================*/
:root {
--primary: #c25414;
--primary-rgb: 194, 84, 20;
--secondary: #3444A5;
--light: #F7F8F8;
--dark: #1E1B1B;
--white: #fff;
--white-rgb: 255, 255, 255;
--success: #27AE60;
--info: #2F80ED;
--danger: #EF1E1E;
--indigo: #3538CD;
--orange: #E04F16;
--pink: #DD2590;
--purple: #800080;
--teal: #0E9384;
--cyan: #06AED4;
--warning: #FDAF22;
--black: #000;
--gray-100: #E5E5E5;
--gray-200: #CBCBCB;
--gray-300: #B2B2B2;
--gray-400: #9A9A9A;
--gray-500: #828282;
--gray-600: #6B6B6B;
--gray-700: #555555;
--gray-800: #404040;
--gray-900: #2C2C2C;
--gray-950: #191919;
--light-100: #FCFCFC;
--light-200: #FBFBFB;
--light-300: #FAFAFA;
--light-400: #F8F8F8;
--light-500: #F7F7F4;
--light-600: #F5F5F5;
--light-700: #F4F4F4;
--light-800: #F3F3F3;
--light-900: #F1F1F1;
--light-950: #D3D3D3;
--cyan-transparent: #E9F8FB;
--danger-transparent: #FEF4F4;
--dark-transparent: #FAFAFA;
--gray-transparent: #FAFAFA;
--indigo-transparent: #EDEDFB;
--info-transparent: #F4F9FE;
--light-transparent: #FEFEFE;
--orange-transparent: #FDF6F3;
--pink-transparent: #FDF4F9;
--primary-transparent: #FFF9F6;
--secondary-transparent: #F2F5FF;
--purple-transparent: #F9F2F9;
--success-transparent:#F4FBF7;
--teal-transparent: #E9F5F4;
--warning-transparent: #FEFBF1;
--primary-100: #FFF3ED;
--primary-200: #FFE6DA;
--primary-300: #FFDAC8;
--primary-400: #FECDB6;
--primary-500: #FDC1A3;
--primary-600: #FBB491;
--primary-700: #F9A77E;
--primary-800: #F79A6A;
--primary-900: #F48D56;
--primary-950: #AE4000;
--secondary-100: #E8ECF7;
--secondary-200: #D2D9EF;
--secondary-300: #BCC6E7;
--secondary-400: #A6B4DE;
--secondary-500: #91A1D5;
--secondary-600: #7D8FCC;
--secondary-700: #697DC3;
--secondary-800: #566AB9;
--secondary-900: #4557AF;
--secondary-950: #2C3A8F;
--danger-100: #FDE9E9;
--danger-200: #FCD2D2;
--danger-300: #FABCBC;
--danger-400: #F9A5A5;
--danger-500: #F78F8F;
--danger-600: #F57878;
--danger-700: #F46262;
--danger-800: #F24B4B;
--danger-900: #F13535;
--danger-950: #D93030;
--warning-100: #FDF6E3;
--warning-200: #FCF2D5;
--warning-300: #FCEDC6;
--warning-400: #FBE8B7;
--warning-500: #FAE4A8;
--warning-600: #F9DF99;
--warning-700: #F8DA89;
--warning-800: #F7D475;
--warning-900: #F6D065;
--warning-950: #CEAD47;
--success-100: #E9F7EF;
--success-200: #D4EFDF;
--success-300: #BEE7CF;
--success-400: #A9DFBF;
--success-500: #93D7B0;
--success-600: #7DCEA0;
--success-700: #68C690;
--success-800: #52BE80;
--success-900: #3DB670;
--success-950: #37A465;
--info-100: #EAF2FD;
--info-200: #D5E6FB;
--info-300: #C1D9FA;
--info-400: #ACCCF8;
--info-500: #97C0F6;
--info-600: #82B3F4;
--info-700: #6DA6F2;
--info-800: #6DA6F2;
--info-900: #448DEF;
--info-950: #3D7FD7;
--cyan-100: #ECF7FB;
--cyan-200: #D9EFF7;
--cyan-300: #C6E7F3;
--cyan-400: #B3DFEF;
--cyan-500: #9FD7EA;
--cyan-600: #8BCFE6;
--cyan-700: #75C7E2;
--cyan-800: #5DBFDD;
--cyan-800: #3FB6D9;
--cyan-950: #39A4C3;
--indigo-100: #E7ECFC;
--indigo-200: #D0DAF9;
--indigo-300: #BAC7F5;
--indigo-400: #A4B4F1;
--indigo-500: #8EA2EC;
--indigo-600: #7A8FE7;
--indigo-700: #667BE1;
--indigo-800: #5467DB;
--indigo-900: #4351D4;
--indigo-950: #3C49BF;
--orange-100: #FFEEE9;
--orange-200: #FEDED4;
--orange-300: #FCCDBE;
--orange-400: #FABDA9;
--orange-500: #F7AC94;
--orange-600: #F49B7E;
--orange-700: #EF8968;
--orange-800: #EB7752;
--orange-900: #E66438;
--orange-950: #CF5A32;
--pink-100: #FFECF4;
--pink-200: #FED9E8;
--pink-300: #FDC6DD;
--pink-400: #FAB2D2;
--pink-500: #F79FC6;
--pink-600: #F38BBB;
--pink-700: #EF76B0;
--pink-800: #E960A5;
--pink-900: #E4479B;
--pink-950: #E4479B;
--purple-100: #F2E6F2;
--purple-200: #E6CCE6;
--purple-300: #D9B3D9;
--purple-400: #CC99CC;
--purple-500: #C080C0;
--purple-600: #B366B3;
--purple-700: #A64DA6;
--purple-800: #993399;
--purple-900: #8D1A8D;
--purple-950: #7F177F;
--teal-100: #D4ECE9;
--teal-200: #BEE2DE;
--teal-300: #A8D8D3;
--teal-400: #ADD3CC;
--teal-500: #98C9C0;
--teal-600: #83BEB3;
--teal-700: #6DB3A7;
--teal-800: #56A89B;
--teal-900: #3B9E90;
--teal-950: #358E82;
--form-bg: #fff;
--heading-color: #2C2C2C;
--border-color: #E5E5E5;
--body-color: #555555;
--input-border: #E5E5E5;
}
:root[data-bs-theme=dark] {
--white: #0C0602;
--dark: #FFFBF9;
--gray-100: #1C1B1B;
--gray-200: #282828;
--gray-300: #464443;
--gray-400: #505050;
--gray-500: #595959;
--gray-600: #817b78;
--gray-700: #BAB4B0;
--gray-800: #D7D0CC;
--gray-900: #EFE9E6;
--gray-950: #E0DDDB;
--light-100: #92908E;
--light-200: #898684;
--light-300: #797979;
--light-400: #6C6A69;
--light-500: #625F5E;
--light-600: #565352;
--light-700: #413F3E;
--light-800: #2F2F2F;
--light-900: #222120;
--light-950: #171615;
--form-bg: #0C0602;
--input-border: #1C1B1B;
--heading-color: #EFE9E6;
--body-color: #BAB4B0;
--border-color: #1C1B1B;
--light: #141312;
--light-rgb: 20, 19, 18;
--light-dark: rgb(17, 16.15, 15.3);
--white: #100F0E;
--white-rgb: 16, 15, 14;
--white-dark: rgb(10.2, 5.1, 1.7);
}
.theme-1 {
--primary: #50723B;
--primary-950: #3A532A;
--primary-transparent: #EFF2ED;
}
.theme-2 {
--primary: #E15362;
--primary-linear-gradient: linear-gradient(90deg, #E15362 0%, #C64D9E 50%, #A356BB 100%);
--primary-hover-gradient: linear-gradient(270deg, #E15362 0%, #C64D9E 50%, #A356BB 100%);
--dark-linear-gradient: linear-gradient(181.77deg, rgba(0, 0, 0, 0.54) -139.23%, rgba(26, 21, 22, 0.6) 98.5%);
}
// Color Variables
$primary: var(--primary);
$primary-rgb: var(--primary-rgb);
$secondary: var(--secondary);
$light: var(--light);
$dark: var(--dark);
$white: var(--white);
$white-rgb: var(--white-rgb);
$success: var(--success);
$info: var(--info);
$danger: var(--danger);
$indigo: var(--indigo);
$cyan: var(--cyan);
$orange: var(--orange);
$pink: var(--pink);
$purple: var(--purple);
$teal: var(--teal);
$warning: var(--warning);
$black: var(--black);
$gray-100: var(--gray-100);
$gray-200: var(--gray-200);
$gray-300: var(--gray-300);
$gray-400: var(--gray-400);
$gray-500: var(--gray-500);
$gray-600: var(--gray-600);
$gray-700: var(--gray-700);
$gray-800: var(--gray-800);
$gray-900: var(--gray-900);
$gray-950: var(--gray-950);
$light-100: var(--light-100);
$light-200: var(--light-200);
$light-300: var(--light-300);
$light-400: var(--light-400);
$light-500: var(--light-500);
$light-600: var(--light-600);
$light-700: var(--light-700);
$light-800: var(--light-800);
$light-900: var(--light-900);
$light-950: var(--light-950);
$primary-100: var(--primary-100);
$primary-200: var(--primary-200);
$primary-300: var(--primary-300);
$primary-400: var(--primary-400);
$primary-500: var(--primary-500);
$primary-600: var(--primary-600);
$primary-700: var(--primary-700);
$primary-800: var(--primary-800);
$primary-900: var(--primary-900);
$primary-950: var(--primary-950);
$secondary-100: var(--secondary-100);
$secondary-200: var(--secondary-200);
$secondary-300: var(--secondary-300);
$secondary-400: var(--secondary-400);
$secondary-500: var(--secondary-500);
$secondary-600: var(--secondary-600);
$secondary-700: var(--secondary-700);
$secondary-800: var(--secondary-800);
$secondary-900: var(--secondary-900);
$secondary-950: var(--secondary-950);
$warning-100: var(--warning-100);
$warning-200: var(--warning-200);
$warning-300: var(--warning-300);
$warning-400: var(--warning-400);
$warning-500: var(--warning-500);
$warning-600: var(--warning-600);
$warning-700: var(--warning-700);
$warning-800: var(--warning-800);
$warning-900: var(--warning-900);
$warning-950: var(--warning-950);
$danger-100: var(--danger-100);
$danger-200: var(--danger-200);
$danger-300: var(--danger-300);
$danger-400: var(--danger-400);
$danger-500: var(--danger-500);
$danger-600: var(--danger-600);
$danger-700: var(--danger-700);
$danger-800: var(--danger-800);
$danger-900: var(--danger-900);
$danger-950: var(--danger-950);
$success-100: var(--success-100);
$success-200: var(--success-200);
$success-300: var(--success-300);
$success-400: var(--success-400);
$success-500: var(--success-500);
$success-600: var(--success-600);
$success-700: var(--success-700);
$success-800: var(--success-800);
$success-900: var(--success-900);
$success-950: var(--success-950);
$info-100: var(--info-100);
$info-200: var(--info-200);
$info-300: var(--info-300);
$info-400: var(--info-400);
$info-500: var(--info-500);
$info-600: var(--info-600);
$info-700: var(--info-700);
$info-800: var(--info-800);
$info-900: var(--info-900);
$info-950: var(--info-950);
$cyan-100: var(--cyan-100);
$cyan-200: var(--cyan-200);
$cyan-300: var(--cyan-300);
$cyan-400: var(--cyan-400);
$cyan-500: var(--cyan-500);
$cyan-600: var(--cyan-600);
$cyan-700: var(--cyan-700);
$cyan-800: var(--cyan-800);
$cyan-900: var(--cyan-900);
$cyan-950: var(--cyan-950);
$indigo-100: var(--indigo-100);
$indigo-200: var(--indigo-200);
$indigo-300: var(--indigo-300);
$indigo-400: var(--indigo-400);
$indigo-500: var(--indigo-500);
$indigo-600: var(--indigo-600);
$indigo-700: var(--indigo-700);
$indigo-800: var(--indigo-800);
$indigo-900: var(--indigo-900);
$indigo-950: var(--indigo-950);
$orange-100: var(--orange-100);
$orange-200: var(--orange-200);
$orange-300: var(--orange-300);
$orange-400: var(--orange-400);
$orange-500: var(--orange-500);
$orange-600: var(--orange-600);
$orange-700: var(--orange-700);
$orange-800: var(--orange-800);
$orange-900: var(--orange-900);
$orange-950: var(--orange-950);
$pink-100: var(--pink-100);
$pink-200: var(--pink-200);
$pink-300: var(--pink-300);
$pink-400: var(--pink-400);
$pink-500: var(--pink-500);
$pink-600: var(--pink-600);
$pink-700: var(--pink-700);
$pink-800: var(--pink-800);
$pink-900: var(--pink-900);
$pink-950: var(--pink-950);
$purple-100: var(--purple-100);
$purple-200: var(--purple-200);
$purple-300: var(--purple-300);
$purple-400: var(--purple-400);
$purple-500: var(--purple-500);
$purple-600: var(--purple-600);
$purple-700: var(--purple-700);
$purple-800: var(--purple-800);
$purple-900: var(--purple-900);
$purple-950: var(--purple-950);
$teal-100: var(--teal-100);
$teal-200: var(--teal-200);
$teal-300: var(--teal-300);
$teal-400: var(--teal-400);
$teal-500: var(--teal-500);
$teal-600: var(--teal-600);
$teal-700: var(--teal-700);
$teal-800: var(--teal-800);
$teal-900: var(--teal-900);
$teal-950: var(--teal-950);
$primary-dark: #AE4000;
$darkmode-white: #fff;
$darkmode-dark: #1E1B1B;
$darkmode-light: #F7F8F8;
$darkmode-gray-800: #404040;
$darkmode-gray-900: #2C2C2C;
$linear-gradient: linear-gradient(180deg, #161004 0%, #F17F3F 49.33%, #161004 100%);
$linear-gradient-primary: linear-gradient(to bottom, #161004 0%, #F17F3F 53.96%, #000000 100%);
$linear-gradient-secondary: linear-gradient(90deg, #F17F3F 0%, #0052B4 100%);$linear-gradient-dark: linear-gradient(180.13deg, rgba(0, 0, 0, 0) 36.74%, #000000 99.89%);
$linear-gradient-white: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
$radial-gradient: radial-gradient(76.88% 100% at 50% 0%, #FFFDFB 0%, #FFECE2 100%);
$linear-gradient-theme: linear-gradient(0deg, #6B9C4C 0%, #008979 100%);
$primary-linear-gradient: var(--primary-linear-gradient);
$primary-hover-gradient: var(--primary-hover-gradient);
$dark-linear-gradient: var(--dark-linear-gradient);
// Transparent
$cyan-transparent: var(--cyan-transparent);
$danger-transparent: var(--danger-transparent);
$gray-transparent: var(--gray-transparent);
$indigo-transparent: var(--indigo-transparent);
$info-transparent: var(--info-transparent);
$light-transparent: var(--light-transparent);
$orange-transparent: var(--orange-transparent);
$pink-transparent: var(--pink-transparent);
$primary-transparent: var(--primary-transparent);
$purple-transparent: var(--purple-transparent);
$secondary-transparent: var(--secondary-transparent);
$success-transparent: var(--success-transparent);
$teal-transparent: var(--teal-transparent);
$warning-transparent: var(--warning-transparent);
$heading-color: var(--heading-color);
$border-color: var(--border-color);
$body-color: var(--body-color);
$form-bg: var(--form-bg);
$input-border: var(--input-border);
$theme-colors: (
"primary": #c25414,
"secondary": #3444A5,
"dark": #1E1B1B,
"light": #F7F8F8,
"info": #2F80ED,
"danger": #EF1E1E,
"success": #27AE60,
"warning": #F5CB50,
"cyan": #06AED4,
"indigo": #3538CD,
"pink": #DD2590,
"orange": #E04F16,
"purple": #800080,
"teal": #0E9384,
"white": #fff,
);
// Base Font
$font-size-base: 16px;
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-bolder: bolder;
// Font Family
$font-family-primary: "Bricolage Grotesque", sans-serif;
$font-tabler: "tabler-icons" !important;
// Border Radius
$border-radius-xs: 2px;
$border-radius-sm: 4px;
$border-radius-md: 6px;
$border-radius-lg: 10px;
$border-radius-xl: 20px;
$rounded: 50%;
$rounded-pill: 1.5rem;
// Box Shadow
$box-shadow: 0 1px 4px 0 rgba(136, 136, 136, 0.1);
$box-shadow-sm: 0 4px 10px 0 rgba(0, 0, 0, 0.12);
$box-shadow-lg: 0 8px 35px 0 rgba(0, 0, 0, 0.16);
$box-shadow-inset: inset 0 0 0 1000px var(--primary);
$box-shadow-inner: 0px 4px 4px 0px #433B24 inset;
// Font
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],200..800&display=swap');