/* colors */
:root {
	--clr-white: hsl(0, 0%, 100%);
	--clr-black: hsl(0, 0%, 0%);
	--clr-transparent: hsla(0, 0%, 100%, 0);
	
	--clr-neutral-00: hsl(0, 0%, 0%);
	--clr-neutral-10: hsl(0, 0%, 10%);
	--clr-neutral-20: hsl(0, 0%, 20%);
	--clr-neutral-30: hsl(0, 0%, 30%);
	--clr-neutral-40: hsl(0, 0%, 40%);
	--clr-neutral-50: hsl(0, 0%, 50%);
	--clr-neutral-60: hsl(0, 0%, 60%);
	--clr-neutral-70: hsl(0, 0%, 70%);
	--clr-neutral-80: hsl(0, 0%, 80%);
	--clr-neutral-85: hsl(0, 0%, 85%);
	--clr-neutral-90: hsl(0, 0%, 89%);
	--clr-neutral-95: hsl(0, 0%, 94%);
	
	--clr-accent1-10: hsl(263, 44%, 21%);
	--clr-accent1-20: hsl(263, 44%, 31%);
	--clr-accent1-30: hsl(263, 44%, 41%); /* headings */
	--clr-accent1-40: hsl(257, 37%, 46%); 
	--clr-accent1-50: hsl(252, 30%, 51%); /* footer bg */
	--clr-accent1-60: hsl(252, 30%, 52%);
	--clr-accent1-70: hsl(252, 30%, 65%);
	--clr-accent1-80: hsl(252, 30%, 75%);
	--clr-accent1-85: hsl(252, 30%, 80%);
	--clr-accent1-90: hsl(252, 30%, 90%); /* shaded accent 1 bg */
	--clr-accent1-95: hsl(252, 30%, 95%);
	
	--clr-danger-40: hsl(0, 60%, 45%);
	--clr-danger-50: hsl(0, 60%, 50%);
	--clr-danger-60: hsl(0, 60%, 60%);
	/* --clr-danger-80: hsl(0, 60%, 80%); */
	--clr-danger-90: hsl(0, 60%, 90%);
	/* --clr-danger-95: hsl(0, 60%, 95%); */
	
	--clr-warning-40: hsl(40, 90%, 40%);
	--clr-warning-50: hsl(40, 90%, 50%);
	/* --clr-warning-60: var(--clr-accent1-60); */
	/* --clr-warning-80: var(--clr-accent1-80); */
	--clr-warning-90: hsl(40, 90%, 90%);
	/* --clr-warning-95: var(--clr-accent1-95); */
	
	--clr-success-40: hsl(140, 50%, 40%);
	--clr-success-50: hsl(140, 50%, 45%);
	/* --clr-success-80: hsl(140, 50%, 80%); */
	--clr-success-90: hsl(140, 50%, 90%);
	/* --clr-success-95: hsl(140, 50%, 95%); */
	
}

/* Assign default colors for all color contexts */
html, 
[class*="color-context-"] { 
	--color-text: var(--color-fg-normal);
	--color-outline: var(--color-fg-vibrant);
	--color-border-default: var(--color-fg-xsubdued);

	--color-btn-primary-border: var(--color-fg-vibrant);
	--color-btn-primary-border-hover: var(--color-fg-vibrant-hover);
	--color-btn-primary-bg: var(--color-fg-vibrant);
	--color-btn-primary-bg-hover: var(--color-fg-vibrant-hover);
	--color-btn-primary-text: var(--color-bg);
	--color-btn-primary-text-hover: var(--color-bg);
    --color-btn-primary-text-disabled: var(--color-bg);
    --color-btn-primary-bg-disabled: var(--color-fg-xsubdued);
    --color-btn-primary-border-disabled: var(--color-fg-xsubdued);

	--color-btn-secondary-border: var(--color-fg-vibrant);
	--color-btn-secondary-border-hover: var(--color-fg-vibrant-hover);
	--color-btn-secondary-bg: transparent;
	--color-btn-secondary-bg-hover: transparent;
	--color-btn-secondary-text: var(--color-fg-vibrant);
	--color-btn-secondary-text-hover: var(--color-fg-vibrant-hover);
    --color-btn-secondary-text-disabled: var(--color-fg-xsubdued);
    --color-btn-secondary-bg-disabled: transparent;
    --color-btn-secondary-border-disabled: var(--color-fg-xsubdued);

	--color-btn-tertiary-border: transparent;
	--color-btn-tertiary-border-hover: transparent;
	--color-btn-tertiary-bg: transparent;
	--color-btn-tertiary-bg-hover: transparent;
	--color-btn-tertiary-text: var(--color-fg-vibrant);
	--color-btn-tertiary-text-hover: var(--color-fg-vibrant-hover);
    --color-btn-tertiary-text-disabled: var(--color-fg-xsubdued);
    --color-btn-tertiary-bg-disabled: transparent;
    --color-btn-tertiary-border-disabled: transparent;

	--color-input-background: var(--color-bg-shaded);
	--color-input-border: var(--color-bg-shaded);
	--color-input-border-focus: var(--color-bg-shaded-2);
	--color-input-background-focus: var(--color-bg-shaded-2);
	--color-input-outline: var(--clr-transparent);
	--color-input-text: var(--color-fg-normal);
	--color-input-placeholder-text: var(--color-fg-subdued);
	--color-input-border-disabled: var(--color-bg-shaded-3);
	--color-input-background-disabled: var(--color-bg-shaded-3);
	--color-input-text-disabled: var(--color-fg-subdued);
	--color-input-text-disabled-placeholder: var(--color-fg-subdued);
	--color-input-error-background: var(--clr-danger-90);
	--color-input-error-text: var(--clr-danger-50);
	--color-input-error-border: var(--clr-danger-90);
	--color-input-error-outline: var(--color-outline);
	--color-input-error-placeholder: var(--clr-danger-60);

	--color-select-background: var(--clr-white);
	--color-select-border: var(--color-fg-subdued);
	--color-select-border-focus: var(--color-fg-normal);
	--color-select-background-focus: var(--color-select-background);
	--color-select-outline: var(--clr-transparent);
	--color-select-text: var(--color-fg-normal);
	--color-select-placeholder-text: var(--color-fg-subdued);
	--color-select-arrow-border: var(--color-fg-normal);
	--color-select-border-disabled: var(--color-fg-xsubdued);
	--color-select-background-disabled: var(--color-select-background);
	--color-select-text-disabled: var(--color-fg-subdued);
	--color-select-text-disabled-placeholder: var(--color-fg-xsubdued);
	--color-select-arrow-border-disabled: var(--color-fg-xsubdued);
	--color-select-error-background: var(--clr-danger-90);
	--color-select-error-text: var(--clr-danger-50);
	--color-select-error-border: var(--color-select-error-background);
	--color-select-error-outline: var(--color-outline);
	--color-select-error-placeholder: var(--clr-danger-60);

	--color-label-error-text: var(--clr-danger-50);
	--color-field-error-description: var(--clr-danger-50);
	--color-field-description: var(--color-fg-subdued);

	--color-checkradio-label-disabled: var(--color-fg-subdued);

	/* outline checkboxes/radios */
	--color-checkradio-background: var(--clr-white);
	--color-checkradio-background-disabled: var(--color-checkradio-background);
	--color-checkradio-background-checked: var(--color-checkradio-background);
	--color-checkradio-border: var(--color-fg-xsubdued);
	--color-checkradio-border-checked: var(--color-checkradio-border);
	--color-checkradio-border-disabled: var(--color-fg-xxsubdued);
	--color-checkradio-outline: var(--color-input-outline);
	--color-checkradio-border-focus: var(--color-fg-normal);
	--color-checkradio-mark: var(--color-fg-vibrant);
	--color-checkradio-mark-disabled: var(--color-checkradio-border-disabled);
	
	
	/* filled checkboxes/radios */
	/* --color-checkradio-background: var(--color-fg-xsubdued);
	--color-checkradio-background-disabled: var(--color-fg-xxsubdued);
	--color-checkradio-background-checked: var(--color-fg-vibrant);
	--color-checkradio-border: var(--color-checkradio-background);
	--color-checkradio-border-checked: var(--color-checkradio-background-checked);
	--color-checkradio-border-disabled: var(--color-checkradio-background-disabled);
	--color-checkradio-outline: var(--color-outline);
	--color-checkradio-border-focus: var(--clr-transparent);
	--color-checkradio-mark: var(--color-bg);
	--color-checkradio-mark-disabled: var(--color-checkradio-mark); */

	--color-tooltip-background: var(--clr-neutral-80);
	--color-tooltip-text: var(--color-fg-normal);
}

/* Set Color Context Color Values */

/* This is the default color context */
html, 
.color-context-neutral-light { 
	--color-bg-opaque: var(--clr-white);
	--color-bg: var(--color-bg-opaque);
	--color-bg-shaded: var(--clr-neutral-95);
	--color-bg-shaded-2: var(--clr-neutral-90);
	--color-bg-shaded-3: var(--clr-neutral-85);
	
	--color-fg-normal: var(--clr-neutral-20);
	--color-fg-subdued: var(--clr-neutral-60);
	--color-fg-xsubdued: var(--clr-neutral-80);
	--color-fg-xxsubdued: var(--clr-neutral-90);
	--color-fg-vibrant: var(--clr-accent1-30);
	
	--color-fg-normal-hover: var(--clr-neutral-10);
	--color-fg-subdued-hover: var(--clr-neutral-50);
	--color-fg-xsubdued-hover: var(--clr-neutral-70);
	--color-fg-xxsubdued-hover: var(--clr-neutral-80);
	--color-fg-vibrant-hover: var(--clr-accent1-20);

	--color-bg-danger: var(--clr-danger-90);
	--color-fg-danger: var(--clr-danger-50);
	--color-fg-danger-hover: var(--clr-danger-40);

	--color-bg-warning: var(--clr-warning-90);
	--color-fg-warning: var(--clr-warning-50);
	--color-fg-warning-hover: var(--clr-warning-40);

	--color-bg-success: var(--clr-success-90);
	--color-fg-success: var(--clr-success-50);
	--color-fg-success-hover: var(--clr-success-40);

    --color-border-preset-1: var(--color-border-default);
    --color-border-preset-2: var(--color-fg-xxsubdued);
    --color-border-preset-3: var(--color-fg-normal);
    --color-border-preset-4: var(--color-fg-vibrant);
}

/* Per Context: override values that need to be different from the default color context */
.color-context-neutral-shaded { 
	--color-bg-opaque: var(--clr-neutral-95);
	--color-bg: var(--color-bg-opaque);
	--color-bg-shaded: var(--clr-neutral-90);
	--color-bg-shaded-2: var(--clr-neutral-85);
	--color-bg-shaded-3: var(--clr-neutral-80);

	--color-btn-tertiary-border: var(--clr-white);
	--color-btn-tertiary-border-hover: var(--clr-white);
	--color-btn-tertiary-bg: var(--clr-white);
	--color-btn-tertiary-bg-hover: var(--clr-white);
}

.color-context-neutral-dark {
	--color-bg-opaque: var(--clr-neutral-10);
	--color-bg: var(--color-bg-opaque);
	--color-bg-shaded: var(--clr-black);
	--color-bg-shaded-2: var(--clr-neutral-10);
	--color-bg-shaded-3: var(--clr-neutral-10);
	
	--color-fg-normal: var(--clr-white);
	--color-fg-subdued: var(--clr-neutral-80);
	--color-fg-xsubdued: var(--clr-neutral-70);
	--color-fg-vibrant: var(--clr-accent1-50);
	
	--color-fg-normal-hover: var(--clr-neutral-95);
	--color-fg-subdued-hover: var(--clr-neutral-90);
	--color-fg-xsubdued-hover: var(--clr-accent1-80);
	--color-fg-vibrant-hover: var(--clr-accent1-60);

	--color-outline: var(--color-fg-normal);

    --color-border-preset-1: var(--color-border-default);
    --color-border-preset-2: var(--clr-neutral-30);
    --color-border-preset-3: var(--color-fg-normal);
    --color-border-preset-4: var(--color-fg-vibrant);

	--color-btn-primary-border: var(--color-fg-normal);
	--color-btn-primary-border-hover: var(--color-fg-normal-hover);
	--color-btn-primary-bg: var(--color-fg-normal);
	--color-btn-primary-bg-hover: var(--color-fg-normal-hover);
	--color-btn-primary-text: var(--color-bg);
	--color-btn-primary-text-hover: var(--color-bg);

	--color-btn-secondary-border: var(--color-fg-normal);
	--color-btn-secondary-border-hover: var(--color-fg-normal-hover);
	--color-btn-secondary-bg: transparent;
	--color-btn-secondary-bg-hover: transparent;
	--color-btn-secondary-text: var(--color-fg-normal);
	--color-btn-secondary-text-hover: var(--color-fg-normal-hover);

	--color-btn-tertiary-border: transparent;
	--color-btn-tertiary-border-hover: transparent;
	--color-btn-tertiary-bg: transparent;
	--color-btn-tertiary-bg-hover: transparent;
	--color-btn-tertiary-text: var(--color-fg-normal);
	--color-btn-tertiary-text-hover: var(--color-fg-normal-hover);

	--color-tooltip-background: var(--clr-white);
	--color-tooltip-text: var(--clr-neutral-20);
}

.color-context-accent1-shaded {
	--color-bg-opaque: var(--clr-accent1-90);
	--color-bg: var(--color-bg-opaque);
	--color-bg-shaded: var(--clr-accent1-85);
	--color-bg-shaded-2: var(--clr-accent1-80);
	--color-bg-shaded-3: var(--clr-accent1-70);

	--color-fg-normal: var(--clr-neutral-30);
	--color-fg-subdued: var(--clr-accent1-70);
	--color-fg-xsubdued: var(--clr-accent1-80);
	--color-fg-xxsubdued: var(--clr-accent1-85);
	--color-fg-vibrant: var(--clr-accent1-30);
	
	--color-fg-normal-hover: var(--clr-neutral-20);
	--color-fg-subdued-hover: var(--clr-accent1-60);
	--color-fg-xsubdued-hover: var(--clr-accent1-70);
	--color-fg-xxsubdued-hover: var(--clr-accent1-80);
	--color-fg-vibrant-hover: var(--clr-accent1-20);

    --color-border-preset-1: var(--color-border-default);
    --color-border-preset-2: var(--color-fg-xxsubdued);
    --color-border-preset-3: var(--color-fg-normal);
    --color-border-preset-4: var(--color-fg-vibrant);

	--color-tooltip-background: var(--clr-white);
	--color-tooltip-text: var(--clr-neutral-20);
}

.color-context-accent1-dark {
	--color-bg-opaque: var(--clr-accent1-50);
	--color-bg: var(--color-bg-opaque);
	--color-bg-shaded: var(--clr-accent1-40);
	--color-bg-shaded-2: var(--clr-accent1-40);
	--color-bg-shaded-3: var(--clr-accent1-40);

	--color-fg-normal: var(--clr-white);
	--color-fg-subdued: var(--clr-accent1-80);
	--color-fg-xsubdued: var(--clr-accent1-70);
	--color-fg-xxsubdued: var(--clr-accent1-60);
	--color-fg-vibrant: var(--clr-neutral-10);
	
	--color-fg-normal-hover: var(--clr-accent1-95);
	--color-fg-subdued-hover: var(--clr-accent1-70);
	--color-fg-xsubdued-hover: var(--clr-accent1-60);
	--color-fg-vibrant-hover: var(--clr-neutral-00);

	--color-outline: var(--color-fg-normal);

    --color-border-preset-1: var(--color-border-default);
    --color-border-preset-2: var(--color-fg-xxsubdued);
    --color-border-preset-3: var(--color-fg-normal);
    --color-border-preset-4: var(--color-fg-vibrant);

	--color-tooltip-background: var(--clr-white);
	--color-tooltip-text: var(--clr-neutral-20);

	--color-btn-primary-border: var(--color-fg-normal);
	--color-btn-primary-border-hover: var(--color-fg-normal-hover);
	--color-btn-primary-bg: var(--color-fg-normal);
	--color-btn-primary-bg-hover: var(--color-fg-normal-hover);
	--color-btn-primary-text: var(--color-bg);
	--color-btn-primary-text-hover: var(--color-bg);

	--color-btn-secondary-border: var(--color-fg-normal);
	--color-btn-secondary-border-hover: var(--color-fg-normal-hover);
	--color-btn-secondary-bg: transparent;
	--color-btn-secondary-bg-hover: transparent;
	--color-btn-secondary-text: var(--color-fg-normal);
	--color-btn-secondary-text-hover: var(--color-fg-normal-hover);

	--color-btn-tertiary-border: transparent;
	--color-btn-tertiary-border-hover: transparent;
	--color-btn-tertiary-bg: transparent;
	--color-btn-tertiary-bg-hover: transparent;
	--color-btn-tertiary-text: var(--color-fg-normal);
	--color-btn-tertiary-text-hover: var(--color-fg-normal-hover);
}

:root {

    --golden-ratio: 1.618;   
     
    /* spacing units */
    --sp-base-unit: 0.20rem;
    --sp-multiple: var(--golden-ratio);
    --sp-0: 0rem;
    --sp-1: var(--sp-base-unit);
    --sp-2: calc(var(--sp-1) * var(--sp-multiple) );
    --sp-3: calc(var(--sp-2) * var(--sp-multiple) );
    --sp-4: calc(var(--sp-3) * var(--sp-multiple) );
    --sp-5: calc(var(--sp-4) * var(--sp-multiple) );
    --sp-6: calc(var(--sp-5) * var(--sp-multiple) );
    --sp-7: calc(var(--sp-6) * var(--sp-multiple) );
    --sp-8: calc(var(--sp-7) * var(--sp-multiple) );
    --sp-9: calc(var(--sp-8) * var(--sp-multiple) );
    --sp-10: calc(var(--sp-9) * var(--sp-multiple) );
    --sp-default: var(--sp-5);

    /* shift classes */
    --shift-increment: 0.05rem;

    /* font size units */
    --fs-base-unit: 1.0rem;
    --fs-multiple: var(--golden-ratio);
    --fs-decrement: calc(var(--fs-base-unit) * var(--fs-multiple) * 0.07 );
    --fs-increment: calc(var(--fs-base-unit) * var(--fs-multiple) * 0.20 );
    --fs-1: calc(var(--fs-2) - var(--fs-decrement) );
    --fs-2: calc(var(--fs-3) - var(--fs-decrement) );
    --fs-3: calc(var(--fs-4) - var(--fs-decrement) );
    --fs-4: var(--fs-base-unit);
    --fs-5: calc(var(--fs-4) + var(--fs-increment) );
    --fs-6: calc(var(--fs-5) + var(--fs-increment) );
    --fs-7: calc(var(--fs-6) + var(--fs-increment) );
    --fs-8: calc(var(--fs-7) + var(--fs-increment) );
    --fs-9: calc(var(--fs-8) + var(--fs-increment) );
    --fs-10: calc(var(--fs-9) + var(--fs-increment) );
    --fs-11: calc(var(--fs-10) + var(--fs-increment) );
    --fs-12: calc(var(--fs-11) + var(--fs-increment) );
    --fs-13: calc(var(--fs-12) + var(--fs-increment) );
    --fs-14: calc(var(--fs-13) + var(--fs-increment) );
    --fs-15: calc(var(--fs-14) + var(--fs-increment) );
    --fs-16: calc(var(--fs-15) + var(--fs-increment) );
    --fs-default: var(--fs-4);

    /* border radius units */
    --border-radius-multiple: 1.45;
    --br-1: 0.2rem;
    --br-2: calc(var(--br-1) * var(--border-radius-multiple) );
    --br-3: calc(var(--br-2) * var(--border-radius-multiple) );
    --br-4: calc(var(--br-3) * var(--border-radius-multiple) );
    --br-5: calc(var(--br-4) * var(--border-radius-multiple) );
    --br-6: calc(var(--br-5) * var(--border-radius-multiple) );
    --br-7: calc(var(--br-6) * var(--border-radius-multiple) );
    --br-8: calc(var(--br-7) * var(--border-radius-multiple) );
    --br-9: calc(var(--br-8) * var(--border-radius-multiple) );
    --br-10: calc(var(--br-9) * var(--border-radius-multiple) );
    --br-full: 9999px;
    --br-default: var(--br-4);
    /* --br-4: 0.8rem;
    --br-5: 0.8rem; */

    /* line weights */
    --ln-1: 0.5px;
    --ln-2: 1px;
    --ln-3: 2px;
    --ln-4: 3px;
    --ln-5: 8px;
    --ln-default: var(--ln-2);

    /* scrolling */
    /* Used by modal js, so must be set in pixels */
    --scroll-margin-top: 25px;
    

    /* border styles */
    --border-style-default: solid;

    /* border presets - size, style, color */
    /* Leave preset 1 as these default variables */
    --border-preset-1-width: var(--ln-default);
    --border-preset-1-style: var(--border-style-default);
    --border-preset-1: var(--border-preset-1-width) var(--border-preset-1-style) var(--color-border-preset-1);
    
    --border-preset-2-width: var(--ln-default);
    --border-preset-2-style: var(--border-style-default);
    --border-preset-2: var(--border-preset-2-width) var(--border-preset-2-style) var(--color-border-preset-2);

    --border-preset-3-width: var(--ln-default);
    --border-preset-3-style: var(--border-style-default);
    --border-preset-3: var(--border-preset-3-width) var(--border-preset-3-style) var(--color-border-preset-3);

    --border-preset-4-width: var(--ln-4);
    --border-preset-4-style: var(--border-style-default);
    --border-preset-4: var(--border-preset-4-width) var(--border-preset-4-style) var(--color-border-preset-4);

    /* focus outline style */
    --outline-style: dashed;
    --outline-width: var(--ln-3);
    --outline-offset: var(--sp-1);

    /* container sizes */
    --container-inline-padding: var(--sp-5);
    --container-gap: var(--sp-5);
    @media (min-width: 500px) { /* sm */
        --container-inline-padding: var(--sp-5);
    } 
    @media (min-width: 800px) { /* md */
        --container-inline-padding: var(--sp-6);
    } 
    @media (min-width: 1100px) { /* lg */
        --container-inline-padding: var(--sp-8);
    } 
    @media (min-width: 1600px) { /* xl */
        --container-inline-padding: var(--sp-8);
    } 

    /* dot sizes */
    --default-dot-size: var(--sp-3);
    
    /* icon sizes */
    --icon-size-1: 1.0rem;
    --icon-stroke-width-1: 2.6;
    --icon-size-2: 1.7rem;
    --icon-stroke-width-2: 1.7;
    --icon-size-3: 2.4rem;
    --icon-stroke-width-3: 1.5;
    --icon-size-4: 3.0rem;
    --icon-stroke-width-4: 1.3;

    --icon-circle-size-1: 2.1rem;
    --icon-circle-size-2: 3.1rem;
    --icon-circle-size-3: 4.2rem;
    --icon-circle-size-4: 5.0rem;    

    /* Set up font families */
    --font-family-sans-serif: lato,sans-serif;
    --trim-text-bs-sans-serif: 0.18;
    --trim-text-be-sans-serif: 0.22;


    /* font-family: meno-display-extra-condensed, serif;
	font-weight: 300;
	font-style: italic; */
    
	--font-family-meno-display: meno-display-extra-condensed, serif;
    --trim-text-bs-meno-display: 0.00;
    --trim-text-be-meno-display: 0.15;

    /* body text (p, div,...) */
    --font-family-body: var(--font-family-sans-serif);
    --trim-text-bs-body: var(--trim-text-bs-sans-serif);
    --trim-text-be-body: var(--trim-text-be-sans-serif);
    --body-line-height: 1.5;
    --body-font-size: var(--fs-default);
    --body-font-weight: 400;
    --strong-font-weight: 900;

    --small-text-line-height: 1.5;
    --small-text-font-size: var(--fs-2);
    
    /* headings */
    --font-family-headings: var(--font-family-meno-display);
    --trim-text-bs-headings: var(--trim-text-bs-meno-display);
    --trim-text-be-headings: var(--trim-text-be-meno-display);
    --headings-line-height: 1.1;
    --headings-font-weight: 300;
    --headings-text-transform: none;
    
    /* h1 */
    --font-family-h1: var(--font-family-headings);
    --trim-text-bs-h1: var(--trim-text-bs-headings);
    --trim-text-be-h1: var(--trim-text-be-headings);
    --h1-font-size: var(--fs-16);
    --h1-font-weight: var(--headings-font-weight);
    --h1-line-height: var(--headings-line-height);
    --h1-text-transform: none;

    /* h2 */
    --font-family-h2: var(--font-family-headings);
    --trim-text-bs-h2: var(--trim-text-bs-headings);
    --trim-text-be-h2: var(--trim-text-be-headings);
    --h2-font-size: var(--fs-11);
    --h2-font-weight: var(--headings-font-weight);
    --h2-line-height: 1.0;
    --h2-text-transform: uppercase;

    /* h3 */
    --font-family-h3: var(--font-family-headings);
    --trim-text-bs-h3: var(--trim-text-bs-headings);
    --trim-text-be-h3: var(--trim-text-be-headings);
    --h3-font-size: var(--fs-11);
    --h3-font-weight: var(--headings-font-weight);
    --h3-line-height: var(--headings-line-height);
    --h3-text-transform: var(--headings-text-transform);

    /* h4 */
    --font-family-h4: var(--font-family-headings);
    --trim-text-bs-h4: var(--trim-text-bs-headings);
    --trim-text-be-h4: var(--trim-text-be-headings);
    --h4-font-size: var(--fs-9);
    --h4-font-weight: var(--headings-font-weight);
    --h4-line-height: var(--headings-line-height);
    --h4-text-transform: var(--headings-text-transform);
    
    /* h5 */
	--font-family-h5: var(--font-family-headings);
    --trim-text-bs-h5: var(--trim-text-bs-headings);
    --trim-text-be-h5: var(--trim-text-be-headings);
    --h5-font-size: var(--fs-7);
    --h5-font-weight: var(--headings-font-weight);
    --h5-line-height: var(--headings-line-height);
    --h5-text-transform: var(--headings-text-transform);
    
    /* h6 */
    --font-family-h6: var(--font-family-body);
    --trim-text-bs-h6: var(--trim-text-bs-body);
    --trim-text-be-h6: var(--trim-text-be-body);
    --h6-font-size: var(--body-font-size);
    --h6-font-weight: 900;
    --h6-line-height: var(--body-line-height);
    --h6-text-transform: none;

    /* small heading */
    --font-family-small-heading: var(--font-family-sans-serif);
    --trim-text-bs-small-heading: var(--trim-text-bs-sans-serif);
    --trim-text-be-small-heading: var(--trim-text-be-sans-serif);
    --small-heading-font-size: var(--fs-3);
    --small-heading-font-weight: 400;
    --small-heading-line-height: 1.2;
    --small-heading-text-transform: uppercase;

	/* text links */
    --text-link-text-decoration: underline;
    --text-link-text-underline-offset: 4px;

    /* list */
    --ul-margin-block-start: 1.1rem; /* to align the bullet */
    --ol-counter-character-width: 0.55rem; /* to calculate ol li indent */

    /* blockquote */
    --font-family-blockquote: var(--font-family-sans-serif);
    --trim-text-bs-blockquote: var(--trim-text-bs-sans-serif);
    --trim-text-be-blockquote: var(--trim-text-be-sans-serif);
    --blockquote-margin-block: var(--sp-6);
    --blockquote-indentation: var(--sp-5);
    --blockquote-font-size: var(--fs-6);
    --blockquote-color: var(--color-fg-subdued);
    --blockquote-line-height: 1.5;
    --blockquote-font-style: italic;
    --blockquote-p-gutter: var(--sp-5);
    --blockquote-attribution-font-size: var(--fs-4);
    --blockquote-attribution-margin-bs: var(--sp-4);

    /* standard buttons */
    --font-family-btn: var(--font-family-sans-serif);
    --btn-font-style: normal;
    --btn-text-transform: uppercase;
    --btn-line-height: 1.0;
    --btn-text-small-multiple: 0.7;
    
    /* per size */
    --btn-small-min-height: 2.1rem;
    --btn-small-font-size: var(--fs-3);
    --btn-small-font-weight: 700;
    --btn-small-text-small-font-weight: 400;
    --btn-small-border-width: var(--ln-3);
    --btn-small-border-radius: var(--br-full);
    --btn-small-padding-inline: var(--sp-5);
    --btn-small-padding-block: 0;
    --btn-small-column-gap: var(--sp-2);
    --btn-small-row-gap: var(--sp-1);
    --btn-small-icon-size: var(--icon-size-1);
    --btn-small-icon-stroke-width: var(--icon-stroke-width-1);
    
    --btn-medium-min-height: 2.9rem;
    --btn-medium-font-size: var(--fs-4);
    --btn-medium-font-weight: 700;
    --btn-medium-text-small-font-weight: 400;
    --btn-medium-border-width: var(--ln-3);
    --btn-medium-border-radius: var(--br-full);
    --btn-medium-padding-inline: var(--sp-5);
    --btn-medium-padding-block: 0;
    --btn-medium-column-gap: var(--sp-3);
    --btn-medium-row-gap: var(--sp-1);
    --btn-medium-icon-size: var(--icon-size-2);
    --btn-medium-icon-stroke-width: var(--icon-stroke-width-2);
    
    --btn-large-min-height: 4.2rem;
    --btn-large-font-size: var(--fs-5);
    --btn-large-font-weight: 700;
    --btn-large-text-small-font-weight: 400;
    --btn-large-border-radius: var(--br-2);
    --btn-large-border-width: var(--ln-4);
    --btn-large-padding-inline: var(--sp-5);
    --btn-large-padding-block: 0.2rem 0;
    --btn-large-column-gap: var(--sp-4);
    --btn-large-row-gap: calc(var(--sp-1) * 0.5);
    --btn-large-icon-size: var(--icon-size-2);
    --btn-large-icon-stroke-width: var(--icon-stroke-width-2);

    /* forms */
    --field-label-line-height: 1.3;
    --field-label-font-size: var(--fs-3);
    
    --field-description-font-size: var(--small-text-font-size);
    --field-description-line-height: var(--small-text-line-height);
    --field-description-margin-block-start: var(--sp-2);

    --input-text-font-family: var(--font-family-sans-serif);
    --input-text-font-weight: 400;
    --input-text-font-style: normal;
    --input-text-placeholder-font-style: italic;
    --input-text-line-height: 1.2;
    --input-text-border-width: var(--ln-2);
    --input-text-label-gap: var(--sp-2);
    
    --input-text-medium-min-height: var(--btn-medium-min-height);
    --input-text-medium-font-size: var(--fs-4);
    --input-text-medium-padding-inline: var(--sp-3);
    --input-text-medium-padding-block: 0.2rem;
    --input-text-medium-border-radius: var(--br-4);

    --input-text-small-min-height: var(--btn-small-min-height);
    --input-text-small-font-size: var(--fs-3);
    --input-text-small-padding-inline: var(--sp-3);
    --input-text-small-padding-block: 0.2rem;
    --input-text-small-border-radius: var(--br-2);

    --select-font-family: var(--input-text-font-family);
    --select-font-weight: var(--input-text-font-weight);
    --select-font-style: var(--input-text-font-style);
    --select-placeholder-font-style: var(--input-text-placeholder-font-style);
    --select-line-height: var(--input-text-line-height);
    --select-border-width: var(--ln-2);
    --select-label-gap: var(--input-text-label-gap);
    
    --select-medium-min-height: var(--btn-medium-min-height);
    --select-medium-font-size: var(--input-text-medium-font-size);
    --select-medium-padding-inline: var(--input-text-medium-padding-inline);
    --select-medium-padding-block: var(--input-text-medium-padding-block);
    --select-medium-border-radius: var(--input-text-medium-border-radius);

    --select-small-min-height: var(--btn-small-min-height);
    --select-small-font-size: var(--input-text-small-font-size);
    --select-small-padding-inline: var(--input-text-small-padding-inline);
    --select-small-padding-block: var(--input-text-small-padding-block);
    --select-small-border-radius: var(--input-text-small-border-radius);

    --checkradio-border-width: var(--ln-3);
    --checkradio-size: 1.5rem;
    --radio-mark-border-width-multiplier: 0.29;
    --checkbox-mark-border-width-multiplier: 0.31;
    --checkbox-border-radius: var(--br-2);
    --checkbox-box-border-radius: var(--br-1);

    /* modals */
    --modal-backdrop-color: var(--clr-black);
    --modal-close-outside-icon-color: var(--clr-white);
    --modal-backdrop-opacity: 0.4;
    --modal-border-radius: var(--br-2);
    --modal-close-button-padding: var(--sp-4);
    --modal-small-max-inline-size: 25rem;
    --modal-medium-max-inline-size: 50rem;
    --modal-large-max-inline-size: 65rem;
    --modal-fade-transition-duration: 0.15s;
    --modal-fade-scale-amount: 0.97;
    --modal-slide-transition-duration: 0.15s;

    /* details */
    
    
    /* toggle transitions */
    --toggle-rotate-90-duration: 0.10s;
    --toggle-rotate-180-duration: 0.15s;
    --toggle-transition-height-duration: 0.2s;

    /* tables */
    --table-line-height: 1.2;
    --table-vertical-align: top;
    --table-row-border-width: var(--ln-default);
    --table-row-border-color: var(--color-border-default);
    --table-thead-row-border-color: var(--color-fg-normal);
    --table-cell-pad-i: var(--sp-0);
    --table-cell-pad-b: var(--sp-3);
    --table-thead-cell-pad-b: var(--table-cell-pad-b);

    /* tooltips */
    --tooltip-arrow-size: 0.7rem;
    --tooltip-bubble-gap: var(--sp-1);
    --tooltip-border-radius: var(--br-2);
    --tooltip-font-size: var(--fs-2);
    --tooltip-padding: var(--sp-2);
    --tooltip-max-width: 10rem;
    --tooltip-transition-duration: 0.1s;
    
}