/*
 * ADJASA design tokens
 * --------------------------------------------------------------------------
 * Every colour, font, size and spacing value used by the theme is declared
 * here and nowhere else. To change the look of the site, change a value in
 * this file; nothing else needs to be touched.
 *
 * The naming follows Squarespace 7.1 Site Styles so the two can be compared
 * line by line:
 *   Colours  -> Site Styles > Colours > palette (five swatches)
 *   Fonts    -> Site Styles > Fonts > Headings / Paragraphs / Buttons
 *   Spacing  -> Site Styles > Spacing, and the section "Height" setting
 */

/* Self-hosted type: no request is made to Google or Adobe at run time. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins-light.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/poppins-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-semibold.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-bold.woff2") format("woff2"); }

:root {
	/* 1. Palette ------------------------------------------------------------ */
	--adj-white:  #FFFFFF;
	--adj-light:  #F4F4F2;
	--adj-accent: #000000;
	--adj-dark:   #3E3E3E;
	--adj-black:  #000000;

	/* 2. What each colour is used for -------------------------------------- */
	--adj-bg:            var(--adj-white);
	--adj-text:          var(--adj-black);
	--adj-heading:       var(--adj-black);
	--adj-link:          var(--adj-black);
	--adj-header-bg:     var(--adj-white);
	--adj-header-text:   var(--adj-black);
	--adj-footer-bg:     var(--adj-white);
	--adj-footer-text:   var(--adj-black);
	--adj-button-bg:     var(--adj-black);
	--adj-button-text:   var(--adj-white);
	--adj-field-bg:      #FAFAFA;
	--adj-field-border:  #A9A9A9;
	--adj-field-focus:   #000000;
	--adj-error:         #CC3B3B;
	--adj-focus-ring:    #1A5FD0;

	/* 3. Fonts -------------------------------------------------------------- */
	--adj-font-heading: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--adj-font-body:    "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--adj-heading-weight:  500;
	--adj-heading-line:    1.25;
	--adj-heading-spacing: 0em;
	--adj-heading-case:    none;

	--adj-body-weight:  400;
	--adj-body-line:    1.8;
	--adj-body-spacing: 0em;
	--adj-bold-weight:  700;

	--adj-title-weight: 500;   /* site title in the header */
	--adj-nav-weight:   400;   /* header navigation        */
	--adj-button-weight: 500;
	--adj-button-spacing: 0.02em;
	--adj-button-case:   none;
	--adj-button-radius: 0px;

	/* 4. Type scale ---------------------------------------------------------
	   Squarespace stores each size as a plain number ("4" = 4rem on a large
	   screen) and scales it down on smaller screens with the formula in
	   content.css. Only the numbers below need to change. */
	--adj-h1:     4;
	--adj-h2:     2.8;
	--adj-h3:     2;
	--adj-h4:     1.5;
	--adj-large:  1.4;   /* Paragraph 1 */
	--adj-normal: 1;     /* Paragraph 2 */
	--adj-small:  0.9;   /* Paragraph 3 */
	--adj-title:  1.5;   /* site title  */
	--adj-nav:    1;     /* navigation  */
	--adj-button: 1;

	/* 5. Spacing ------------------------------------------------------------ */
	--adj-page-padding:   4vw;      /* left and right edge of every section   */
	--adj-max-width:      1400px;   /* Site Styles > Spacing > Max page width */
	--adj-content-width:  840px;    /* running text                           */
	--adj-section-pad:    6.6vmax;  /* section height "Medium"                */
	--adj-section-pad-s:  3.3vmax;  /* section height "Small"                 */
	--adj-header-pad:     2vw;
	--adj-logo-height:    50px;
	--adj-nav-gap:        1.8vw;

	--adj-para-gap:    1rem;        /* space above and below a paragraph      */
	--adj-heading-gap: 2rem;        /* space above and below a heading        */
	--adj-block-gap:   2rem;        /* space around images, buttons, forms    */
	--adj-grid-col-gap: 40px;       /* executive grid                         */
	--adj-grid-row-gap: 60px;
	--adj-grid-cols:    3;

	/* Fluid unit used by the type scale (see content.css). */
	--adj-fluid: 1.2vw;
}

@media (max-width: 767px) {
	:root {
		--adj-page-padding: 6vw;
		--adj-header-pad:   6vw;
		--adj-logo-height:  30px;
		--adj-grid-cols:    1;
		--adj-fluid: calc(0.012 * min(100vh, 900px));
	}
}