/* LIVE Rosenau */

/*

p 17 - 25

https://utopia.fyi/type/calculator?c=360,17,1.2,1840,24,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12

https://moderncss.dev/container-query-units-and-fluid-typography/

container-type: inline-size !!!
*/

:root {
  
  /* Fonts */
  --font-body: 'Google Sans Flex', sans-serif;
  /*--font-condensed: 'Google Sans Flex', sans-serif;*/
  
  --h1-size: var(--fluid-26-62);
  --h2-size: var(--fluid-cq-32-52);
  --h3-size: var(--fluid-cq-26-42);
  --h4-size: var(--fluid-cq-26-36);
  --h5-size: var(--fluid-cq-24-34);

  --h1-settings: 'wdth' 65, 'wght' 600, 'GRAD' 50;
  --h2-settings: 'wdth' 65, 'wght' 600, 'GRAD' 0;
  --h3-settings: 'wdth' 100, 'wght' 400, 'GRAD' 50;
  --h4-settings: 'wdth' 65, 'wght' 600, 'GRAD' 0;
  --h5-settings: 'wdth' 100, 'wght' 500, 'GRAD' 50;
  
  --p1-size: var(--fluid-17-24);
  --p2-size: var(--fluid-16-23);
  --p3-size: var(--fluid-14-18);
  
  --p-settings: 'wdth' 100, 'wght' 400, 'GRAD' 0;
  
  /* Colors */
  --color-black: #000000;
  --color-blue: #d3def0;
  --color-grey: #707070;
  --color-lightgrey: #b2b2b2;
  --color-orange: #E8561F;
  --color-purple: #665F9D;
  --color-red: #DB0022;
  --color-white: #ffffff;
  
  --color-base: var(--color-dark);
  --color-dark: var(--color-black);
  --color-light: var(--color-white);
  
  --color-rosenau: #932D43;
  --color-rosenau--muted: #c66479;
  
  --color-primary: var(--color-rosenau);
  --color-primary--muted: var(--color-rosenau--muted);
  --color-alert: var(--color-orange);
  --color-highlight: var(--color-primary);
  --color-link: var(--color-base);
  --color-mute: var(--color-grey);
  --color-neutral: var(--color-grey);
  --color-cta: var(--color-red);
  --color-unavailable: var(--color-lightgrey);
  
  --color-fill: var(--color-white);
  --color-border: var(--color-grey);
  --color-on: var(--color-base);
  --color-on--muted: var(--color-grey);
  
  /* Border */
  --border: 1px solid var(--color-border);
  --border-radius: 10px;

  /* Space */
  --space: 1em;
  --gap: var(--space);
  --gap-small: calc(0.5 * var(--gap));
  --gap-large: calc(3 * var(--gap));
  --margin: var(--space);
  --margin-large:  calc(3 * var(--margin));
  --padding: var(--space);
  --padding-small: calc(0.5 * var(--padding));
  --padding-large: calc(3 * var(--padding));
  --flow: var(--space);
  --stack: var(--space);
  --indent: calc(3 * var(--gap));
  --size: 1823px; /* ??? */
  --size-stage: 1920px;
  
  /* Type */  
  --step-5: 36px; /* h1 */
  --step-4: 32px; /* h2 */
  --step-3: 28px; /* h3 */
  --step-2: 24px; /* h4 */
  --step-1: 20px; /* h5 */
  --step-0: 16px;
  --step--1: 15px;
  --step--2: 14px;
  --step--3: 13px;
  --step--4: 12px;
  
  /* GRID */
  
  /*
  
  Limit width: 1823 Px

  4 x 78 + 3 * 15 => 4 * 21.85% + 3 * 4.20% ODER 4 * 21.83% + 3 * 4.23%
  6 x 47 + 5 * 15 => 6 * 13.17% + 5 * 4.20%
  12 * 129 + 11 * 25 => 12 * 7.08% + 11 * 1.37%
  14 * 120 + 13 * 11 => 14 * 6.58% + 13 * 0.6%
  16 * 90.5 + 15 * 25 => 16 * 4.96% + 15 * 1.37%
  */
  
  --grid-4-column: 21.85%;
  --grid-4-gap: 4.20%;
  --grid-6-column: 13.17%;
  --grid-6-gap: 4.20%;
  --grid-12-column: 7.08%;
  --grid-12-gap: 1.37%;
  --grid-14-column: 6.58%;
  --grid-14-gap: 0.6%;
  
  --grid-content-12: calc(6 * var(--grid-12-column) + 5 * var(--grid-12-gap));
  --grid-sidebar-12: calc(3 * var(--grid-12-column) + 2 * var(--grid-12-gap));
  --grid-picture-12: calc(2 * var(--grid-12-column) + 1 * var(--grid-12-gap));
  --grid-content: var(--grid-content-12);
  --grid-sidebar: var(--grid-sidebar-12); 
  --grid-picture: var(--grid-picture-12);  

}

/* @link https://utopia.fyi/type/calculator?c=360,17,1.2,1840,24,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

/*
:root {
  --step--2: clamp(0.7378rem, 0.6639rem + 0.3285cqi, 1.0417rem);
  --step--1: clamp(0.8854rem, 0.7967rem + 0.3941cqi, 1.25rem);
  --step-0: clamp(1.0625rem, 0.9561rem + 0.473cqi, 1.5rem);
  --step-1: clamp(1.275rem, 1.1473rem + 0.5676cqi, 1.8rem);
  --step-2: clamp(1.53rem, 1.3768rem + 0.6811cqi, 2.16rem);
  --step-3: clamp(1.836rem, 1.6521rem + 0.8173cqi, 2.592rem);
  --step-4: clamp(2.2032rem, 1.9825rem + 0.9808cqi, 3.1104rem);
  --step-5: clamp(2.6438rem, 2.379rem + 1.1769cqi, 3.7325rem);
}
*/
  
  
  
  
  
  /********************************************************
   CHECK
   ********************************************************/
  
  
  /* Space */
  
  /*
  --grid-column: 7.08%;
  --grid-gap: 1.37%;
  --grid-column-width: 129px;
  --grid-gap-width: 25px;
  
  --grid-s-column: 21.85%;
  --grid-s-gap: 4.20%;
  --grid-content-14: calc(8 * var(--grid-14-column) + 7 * var(--grid-14-gap));
  */
 
  /* Colors */ 
  
  /*
  --color-lightgrey: #b2b2b2;  
  --color-warning: var(--color-orange);
  */
  /*
  --border-width: 2px;
  */

  /*--pico-font-size: 1em !important;
  --pico-color: var(--color-base) !important;
  --pico-muted-color: var(--color-base) !important;
  --pico-spacing: 0;
  --pico-typography-spacing-vertical: 0;
  --pico-nav-element-spacing-vertical: 0;
  --pico-nav-element-spacing-horizontal: 0;
  --pico-nav-link-spacing-vertical: 0;
  --pico-nav-link-spacing-horizontal: 0;*/
}