/*
Theme Name:  Cj Studio
Version: 1.1
Buidler:  bricks
*/


:root{
  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
  FONTS
  ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
  /* FONT FAMILY */
  --primary-font:'stolzl', sans-serif;
  --secondary-font:var(--primary-font);
  --thrid-font:var(--primary-font);

  /* FONT WEIGHT */
  --weight-light:300;
  --weight-regular:400;
  --weight-semi:500;
  --weight-bold:var(--weight-semi);

  /* FONTS */
  --body-font:var(--primary-font);
  --body-weight:var(--weight-light);

  --headline-font:var(--primary-font);
  --headline-weight:var(--weight-regular);

  --link-font:var(--primary-font);
  --link-weight:var(--weight-regular);


  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
  FONT SIZE
  ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
  /* LINE HEIGHT unit sum up on font-size*/
  --line-height-unit:8px;

  /* FONT SIZE */
  --font-size-micro:12px;
  --font-size-body:14px;
  --font-size-XS: 16px;
  --font-size-S: 22px;
  --font-size-M: 26px;
  --font-size-L: 32px;
  --font-size-XL: 44px;
  --font-size-2XL: 62px;
  --font-size-3XL: 80px;

  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
  COLOR
  ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

  /* FONTS COLORS */
  --body-color:var(--grey-50);
  --body-color-light:var(--light);
  --body-color-dark:var(--grey-10);

  --headline-color:var(--dark);
  --headline-color-light:var(--light);
  --headline-color-dark:var(--dark);

  --link-color:;
  --link-color-light:var(--light);
  --link-color-dark:var(--dark);

  --label-color:var(--grey-50);
  --label-color-light:var(--light);
  --label-color-dark:var(--dark);

  --blockquote-color:;
  --blockquote-color-light:;
  --blockquote-color-dark:;

  /* BASIC BACKGROUND COLORS */
  --background-dark:var(--dark);
  --background-light:var(--light);

  /* LINKS COLORS */
  --highlight-01:var(--primary-color);
  --highlight-01-text:var(--light);
  --highlight-01-hover:var(--primary-color-80);
  --highlight-01-hover-text:var(--light);

  --highlight-02:var(--primary-color-60);
  --highlight-02-text:var(--dark);
  --highlight-02-hover:var(--primary-color-80);
  --highlight-02-hover-text:var(--light);

  --highlight-03:var(--primary-color-60);
  --highlight-03-text:var(--dark);
  --highlight-03-hover:var(--primary-color);
  --highlight-03-hover-text:var(--light);

  --color-light:var(--light);
  --color-light-hover:var(--primary-color-60);

  --color-dark:var(--dark);
  --color-dark-hover:var(--grey-50);

  --color-success:;
  --color-success-hover:;

  /* Also use for labels */
  --color-error:;
  --color-error-text:;
  --color-error-hover:;

  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
  BORDER
  ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
  --border-radius-unit:5px;

  --primary-border-size:1px;
  --secondary-border-size:2px;

  --primary-border-color:#aa887033;
  --secondary-border-color:rgba(67, 73, 81, 0.1);
    
  /* Border setting for inputs on light background*/
  --primary-border-dark:#A4ABB460;
  --primary-border-dark-hover:var(--dark);
  --primary-border-dark-focus:var(--dark);

  /* Border setting for inputs on dark background */
  --primary-border-light:#A4ABB460;
  --primary-border-light-hover:var(--light);
  --primary-border-light-focus:var(--light);

  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
  SPACING UNITS
  ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

  --flex-gap:15px;

  /* MARGIN set in pixel*/
  --margin-unit:20px;
  --margin-bottom-unit:20px;
  --margin-top-unit:20px;

  /* PADDING */
  --padding-unit:20px;
  --padding-bottom-unit:20px;
  --padding-left-unit:20px;
  --padding-right-unit:20px;
  --padding-top-unit:20px;

  /* PADDING BUTTON*/
  --padding-button-md-x:10px;
  --padding-button-md-y:20px;

  --padding-button-lg-x:15px;
  --padding-button-lg-y:30px;

  /* WRAPPER set in %*/
  /* Use to set wrapper around element */
  --wrapper-unit:5%;

  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
  INTERACTION
  ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
  /* Global animation */
  --animation-type-in: cubic-bezier(.83,.09,.62,1);
  --animation-type-out: cubic-bezier(.83,.09,.62,1);

  --animation-time-in: .3s;
  --animation-time-out: .2s;

  /* Specific animation */
  --animation-button-in: all .3s;
  --animation-button-out: all .2s;


  /* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
  PRE DEFINED VARIABLE
  ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
  /* COLORS */
  --theme-primary: var(--primary-color);
  --theme-secondary: var(--secondary-color);

  --theme-dark: var(--color-dark);
  --theme-light: var(--color-light);

  /* BORDER RADIUS */
  --border-radius-1:calc(var(--border-radius-unit) * 1);
  --border-radius-2:calc(var(--border-radius-unit) * 2);
  --border-radius-3:calc(var(--border-radius-unit) * 3);
  --border-radius-4:calc(var(--border-radius-unit) * 4);
  --border-radius-5:calc(var(--border-radius-unit) * 5);
  --border-radius-6:calc(var(--border-radius-unit) * 6);
  --border-radius-7:calc(var(--border-radius-unit) * 7);
  --border-radius-8:calc(var(--border-radius-unit) * 8);
  --border-radius-9:calc(var(--border-radius-unit) * 9);
  --border-radius-10:calc(var(--border-radius-unit) * 10);    

  /* HEIGHT */
  --height-120vh:120vh;
  --height-100vh:100vh;
  --height-90vh:90vh;
  --height-80vh:80vh;
  --height-75vh:75vh;
  --height-70vh:70vh;    
  --height-60vh:60vh;
  --height-50vh:50vh;

  --height-110:110%;
  --height-100:100%;
  --height-90:90%;
  --height-80:80%;
  --height-75:75%;
  --height-70:70%;
  --height-60:60%;
  --height-50:50%;
  --height-40:40%;
  --height-30:30%;
  --height-25:25%;
  --height-20:20%;
  --height-10:10%;

  /* LINE HEIGHT */
  --line-height-body: calc(var(--font-size-body) + var(--line-height-unit));
  --line-height-XS: calc(var(--font-size-XS) + var(--line-height-unit));
  --line-height-S: calc(var(--font-size-S) + var(--line-height-unit));
  --line-height-M: calc(var(--font-size-M) + var(--line-height-unit));
  --line-height-L: calc(var(--font-size-L) + var(--line-height-unit));
  --line-height-XL: calc(var(--font-size-XL) + var(--line-height-unit));
  --line-height-2XL: calc(var(--font-size-2XL) + var(--line-height-unit));
  --line-height-3XL: calc(var(--font-size-3XL) + var(--line-height-unit));

  /* MARGIN */
  --margin-0:0;
  --margin-1_2:calc(var(--margin-unit) / 2);
  --margin-1:var(--margin-unit);
  --margin-2:calc(var(--margin-1) * 2);
  --margin-3:calc(var(--margin-1) * 3);
  --margin-4:calc(var(--margin-1) * 4);
  --margin-5:calc(var(--margin-1) * 5);
  --margin-6:calc(var(--margin-1) * 6);
  --margin-7:calc(var(--margin-1) * 7);
  --margin-8:calc(var(--margin-1) * 8);
  --margin-9:calc(var(--margin-1) * 9);
  --margin-10:calc(var(--margin-1) * 10);

  --margin-bottom-1:var(--margin-bottom-unit);
  --margin-bottom-2:calc(var(--margin-bottom-1) * 2);
  --margin-bottom-3:calc(var(--margin-bottom-1) * 3);
  --margin-bottom-4:calc(var(--margin-bottom-1) * 4);
  --margin-bottom-5:calc(var(--margin-bottom-1) * 5);
  --margin-bottom-6:calc(var(--margin-bottom-1) * 6);
  --margin-bottom-7:calc(var(--margin-bottom-1) * 7);
  --margin-bottom-8:calc(var(--margin-bottom-1) * 8);
  --margin-bottom-9:calc(var(--margin-bottom-1) * 9);
  --margin-bottom-10:calc(var(--margin-bottom-1) * 10);

  --margin-top-1:var(--margin-top-unit);
  --margin-top-2:calc(var(--margin-top-1) * 2);
  --margin-top-3:calc(var(--margin-top-1) * 3);
  --margin-top-4:calc(var(--margin-top-1) * 4);
  --margin-top-5:calc(var(--margin-top-1) * 5);
  --margin-top-6:calc(var(--margin-top-1) * 6);
  --margin-top-7:calc(var(--margin-top-1) * 7);
  --margin-top-8:calc(var(--margin-top-1) * 8);
  --margin-top-9:calc(var(--margin-top-1) * 9);
  --margin-top-10:calc(var(--margin-top-1) * 10);

  /* PADDING */
  --padding-0:0;
  --padding-1_2:calc(var(--padding-unit) / 2);
  --padding-1:var(--padding-unit);
  --padding-2:calc(var(--padding-1) * 2);
  --padding-3:calc(var(--padding-1) * 3);
  --padding-4:calc(var(--padding-1) * 4);
  --padding-5:calc(var(--padding-1) * 5);
  --padding-6:calc(var(--padding-1) * 6);
  --padding-7:calc(var(--padding-1) * 7);
  --padding-8:calc(var(--padding-1) * 8);
  --padding-9:calc(var(--padding-1) * 9);
  --padding-10:calc(var(--padding-1) * 10);

  --padding-bottom-1:var(--padding-bottom-unit);
  --padding-bottom-2:calc(var(--padding-bottom-1) * 2);
  --padding-bottom-3:calc(var(--padding-bottom-1) * 3);
  --padding-bottom-4:calc(var(--padding-bottom-1) * 4);
  --padding-bottom-5:calc(var(--padding-bottom-1) * 5);
  --padding-bottom-6:calc(var(--padding-bottom-1) * 6);
  --padding-bottom-7:calc(var(--padding-bottom-1) * 7);
  --padding-bottom-8:calc(var(--padding-bottom-1) * 8);
  --padding-bottom-9:calc(var(--padding-bottom-1) * 9);
  --padding-bottom-10:calc(var(--padding-bottom-1) * 10);

  --padding-top-1:var(--padding-top-unit);
  --padding-top-2:calc(var(--padding-top-1) * 2);
  --padding-top-3:calc(var(--padding-top-1) * 3);
  --padding-top-4:calc(var(--padding-top-1) * 4);
  --padding-top-5:calc(var(--padding-top-1) * 5);
  --padding-top-6:calc(var(--padding-top-1) * 6);
  --padding-top-7:calc(var(--padding-top-1) * 7);
  --padding-top-8:calc(var(--padding-top-1) * 8);
  --padding-top-9:calc(var(--padding-top-1) * 9);
  --padding-top-10:calc(var(--padding-top-1) * 10);

  /* WRAPPER */
  --wrapper-1:var(--wrapper-unit);
  --wrapper-2:calc(var(--wrapper-1) * 2);
  --wrapper-3:calc(var(--wrapper-1) * 3);
  --wrapper-4:calc(var(--wrapper-1) * 4);
  --wrapper-5:calc(var(--wrapper-1) * 5);
  --wrapper-6:calc(var(--wrapper-1) * 6);
  --wrapper-7:calc(var(--wrapper-1) * 7);
  --wrapper-8:calc(var(--wrapper-1) * 8);
  --wrapper-9:calc(var(--wrapper-1) * 9);
  --wrapper-10:calc(var(--wrapper-1) * 10);

  /* ORDER */
  --order-1:1;
  --order-2:2;
  --order-3:3;
  --order-4:4;

  /* PADDING */

  /* WIDTH */
  --width-100:100%;
  --width-90:90%;
  --width-80:80%;
  --width-75:75%;
  --width-70:70%;
  --width-66:calc(100% / 3 * 2);
  --width-60:60%;
  --width-50:50%;
  --width-40:40%;
  --width-33:calc(100% / 3);
  --width-30:30%;
  --width-25:25%;
  --width-20:20%;
  --width-10:10%;

}