/*
Theme Name:  Cj Studio
Author: Cj Studio
Name: THEME MANAGER
Version: 2.0
*/

/*RULES
l = light
d = dark
sm = small
md = medium
lg = large
xl = xlarge
XS | S | M | L | XL | 2XL | 3XL = typo sizing

*/

:root {
    /* COLORS –––––––––––––––––––––––––––––––––––––– */
    /*    Color HEX variables set in Advance Themer*/
    
    /* BODY */
    --body-color: var(--dark);
    --body-color-l: var(--neutral-l);
    --body-color-d: var(--neutral);

    /* HEADLINE*/
    --headline-color: var(--dark);;
    --headline-color-l: var(--light);
    --headline-color-d: var(--dark);

    /* HYPERLINKS*/
    --hyperlink-color: var(--primary);

    /* LABEL*/
    --label-color: var(--neutral);
    --label-color-l: var(--neutral-l);
    --label-color-d: var(--neutral-d);

    /* BLOCKQUOTE*/
    --blockquote-color: var(--neutral);
    --blockquote-color-l: var(--neutral-l);
    --blockquote-color-d: var(--neutral-d);
    
    
    
    
    /* BACKGRUND COLOR –––––––––––––––––––––––––––––––––––––– */
    /* NEUTRAL BACKGROUND */
    --background-d: var(--dark);
    --background-l: var(--light);

    /* COLORS BACKGROUND + TEXT*/
    --highlight-01: var(--primary);
    --highlight-01-hover: var(--primary);
    --highlight-01-headline: var(--light);
    --highlight-01-hover-headline: var(--light);
    --highlight-01-body: var(--neutral);
    --highlight-01-hover-body: var(--neutral);

    --highlight-02: var(--secondary);
    --highlight-02-hover: var(--secondary-d);
    --highlight-02-headline: var(--dark);
    --highlight-02-hover-headline: var(--dark);
    --highlight-02-body: var(--dark);
    --highlight-02-hover-body: var(--dark);

    --highlight-03: var(--thrid);
    --highlight-03-hover: var(--thrid-d);
    --highlight-03-headline: var(--dark);
    --highlight-03-hover-headline: var(--light);
    --highlight-03-body: var(--dark);
    --highlight-03-hover-body: var(--dark);
    
    --highlight-04: var(--fourth);
    --highlight-04-hover: var(--fourth-d);
    --highlight-04-headline: var(--dark);
    --highlight-04-hover-headline: var(--light);
    --highlight-04-body: var(--dark);
    --highlight-04-hover-body: var(--dark);

    
    
    /* BORDERS INPUT –––––––––––––––––––––––––––––––––––––– */
    /* Border setting for inputs on light background*/
    --border-d: var(--neutral-l);
    --border-d-hover: var(--neutral);
    --border-d-focus: var(--dark);

    /* Border setting for inputs on dark background */
    --border-l: var(--neutral-l);
    --border-l-hover: var(--neutral);
    --border-l-focus: var(--light);
    
    
    
    /* FONTS –––––––––––––––––––––––––––––––––––––– */
    /* FONT FAMILY */
    
    --primary-font: "stolzl", sans-serif;
    --secondary-font: "quincy-cf", sans-serif;;
    --thrid-font: var(--primary-font);

    /* FONT WEIGHT */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-semi: 500;
    --weight-bold: 600;

    /* FONTS STYLE*/
    --body-font-family: var(--secondary-font);
    --body-weight: var(--weight-light);
    --body-line-height: 1.5;

    --headline-font-family: var(--primary-font);
    --headline-weight: var(--weight-bold);
    --headline-line-height: 1.2;

    --link-font-family: var(--primary-font);
    --link-weight: var(--weight-light);
    --link-line-height: 1.2;

    --blockquote-font-family: var(--primary-font);
    --blockquote-weight: var(--weight-light);
    --blockquote-line-height: 1.2;

}