/* colors */
:root {

	/* ------------------------------------------ */
	--lightest: 0, 0%, 100%;
	--darkest: 220, 20%, 10%;
	
	--color-lightest: hsl(var(--lightest));
	--color-darkest: hsl(var(--darkest));
	
	/* --------- default mode (light-mode) --------- */
	--bg: var(--lightest);
	--o-bg: var(--darkest);
	
	--color-bg: hsl(var(--bg));
	--color-o-bg: hsl(var(--o-bg));
	
	--c1:  355, 100%, 50%;
	--c2:  180, 100%, 50%;
	--c3: 355, 100%, 70%;
	
	--color-c1: hsl(var(--c1));
	--color-c2: hsl(var(--c2));
	--color-c3: hsl(var(--c3));

	--o-c1: var(--o-bg);
	--o-c2: var(--o-bg);
	--o-c3: var(--o-bg);

	--color-o-c1: hsl(var(--o-c1));
	--color-o-c2: hsl(var(--o-c2));
	--color-o-c3: hsl(var(--o-c3));
	
	/* --color-o-prim: color-contrast(hsl(var(--prim)) vs var(--color-lightest), var(--color-darkest));
	--color-o-sec: color-contrast(hsl(var(--sec)) vs var(--color-lightest), var(--color-darkest));
	--color-o-acc: color-contrast(hsl(var(--acc)) vs var(--color-lightest), var(--color-darkest)); */
	
}

/* media queries */
@media screen and (min-width: 1401px),
(max-width: 1400px) {
  :root {
    --core-unit: 1rem;
    --ratio-size: 0.5;
    --ratio-space: 0.5;
		--ratio-font-grow: 1.18;

    --size-unit: calc(var(--core-unit) * var(--ratio-size));
    --space-unit: calc(var(--core-unit) * var(--ratio-space));
    
    --page-padding-h: calc(var(--space-unit)*3);
    --page-padding-v: calc(var(--space-unit)*8);

    --container-padding-h: calc(var(--space-unit)*3);

    --page-max-width: 1200px;

    --logo-width: calc(var(--size-unit)* 16);
  }
}

@media screen and (max-width: 1280px) {
  :root {}
}

@media screen and (max-width: 960px) {
  :root {

  }
}

@media screen and (max-width: 840px) {
  :root {
		--ratio-font-grow: 1.12;
  }
}

@media screen and (max-width: 640px) {
  :root {
		--ratio-font-grow: 1.1;
  }
}

@media screen and (max-width: 480px) {
  :root {
  }
}

@media screen and (max-width: 320px) {
  :root {
  }
}