@layer base { /* component */
  :root {/* General */
    --main-max-width:var(--content-max-width);

    --body-color-background: var(--color-page);
    --body-text-color: var(--text-main);
    --body-select-color-background: var(--color-accent);
    --body-select-color: var(--text-accent);
    --body-font: var(--font-main);
    
    --link-color: var(--text-link);
    --link-hover-color: var(--text-link-hover);
    
    --heading-font:var(--font-fancy);
    --heading-font-weight: var(--font-weight-l);
    --heading-line-height: var(--line-height-l);
    --heading-letter-spacing: var(--letter-spacing-s);
    --heading-1-size: var(--font-size-3xl);
    --heading-2-size: var(--font-size-2xl);
    --heading-3-size: var(--font-size-xl);
    --heading-4-size: var(--font-size-l);
    --heading-5-size: var(--font-size-m);
    --heading-6-size: var(--font-size-s);

    --text-max-width: var(--max-width-l);
    
    --input-accent-color: var(--color-accent);

  }
  :root {/* Header */
    /* Layout */
    --mos-banner-height: var(--font-size-4xl);
    --mos-banner-logo-size: var(--font-size-2xl);
    
    --mos-banner-padding: var(--space-s);
    --mos-banner-gap: var(--mos-banner-padding);
    --mos-banner-radius: var(--radius-l);
    
    /* Typography */
    --mos-banner-title-size: var(--font-size-3xl);
    --mos-banner-font-family: var(--font-fancy);
    --mos-banner-title-weight: var(--font-weight-xl);
    --mos-banner-title-letter-spacing: var(--letter-spacing-l);

    /* Color */
    --mos-banner-background: var(--color-banner);
    --mos-banner-text-main:  var(--text-banner);
    --mos-banner-shadow: var(--shadow-banner);

  }
  :root {/* Nav */
    /* Layout */
    --mos-nav-position-docked: calc(-100% + var(--mos-banner-height) + 0.5*var(--mos-banner-padding));
    --mos-nav-position-out: 0;
    --mos-nav-position: var(--mos-nav-position-docked);

    --mos-nav-ease: var(--ease-standard);
    --mos-nav-time: var(--time-l);
    --mos-nav-gap: var(--space-m);
  }
  :root {/* Logo */
    /* Shadow DOM */
    --mos-logo-animation: paused;

    /* Layout */
    --mos-logo-size-max: var(--size-xl);

    --mos-logo-margin: var(--space-xs);
    --mos-logo-radius: var(--radius-square-m);

    --mos-logo-color-transition:var(--time-s);
    --mos-logo-duration: var(--time-xl);
    --mos-logo-duration-mobile: var(--time-xxl);
    --mos-logo-ease: ease-in-out;

    /* Color */
    --mos-logo-background: var(--color-accent);
    --mos-logo-legs: var(--text-theme);
    --mos-logo-top: var(--text-theme);
    --mos-logo-left: var(--text-theme);
    --mos-logo-right: var(--text-theme);

    --mos-logo-active-background: var(--color-accent);
    --mos-logo-active-legs: var(--text-theme);
    --mos-logo-active-top: var(--dark--1);
    --mos-logo-active-left: var(--sharp-red);
    --mos-logo-active-right: var(--bright-yellow);

    /* SVG */
    --mos-logo-top-stroke-width: 12;
    --mos-logo-top-d:     "M10,25 q20,-20,40,0 q20,20,40,0";
    --mos-logo-top-d-alt: "M10,25 q20, 20,40,0 q20,-20,40,0";

    --mos-logo-knee-stroke-width: 6;
    --mos-logo-knee-r: 8;
    --mos-logo-knee-left-cx: 30;
    --mos-logo-knee-left-cy: 47;
    --mos-logo-knee-right-cx: 70;
    --mos-logo-knee-right-cy: 65;

    --mos-logo-thigh-left-d:      "M 26 25 q 4 -3 8 0 v 9 q -4 -2 -8 0 z";
    --mos-logo-thigh-left-d-alt:  "M 26 44 q 4  1 8 0 v 8 q -4 -2 -8 0 z";
    --mos-logo-thigh-right-d:     "M 66 44 q 4  1 8 0 v 8 q -4 -2 -8 0 z";
    --mos-logo-thigh-right-d-alt: "M 66 25 q 4 -3 8 0 v 9 q -4 -2 -8 0 z";

    --mos-logo-calf-left-d:      "M 26 60 q 4 2 8 0 v 30 h -8 z";
    --mos-logo-calf-left-d-alt:  "M 26 78 q 4 2 8 0 v 12 h -8 z";
    --mos-logo-calf-right-d:     "M 66 78 q 4 2 8 0 v 12 h -8 z";
    --mos-logo-calf-right-d-alt: "M 66 60 q 4 2 8 0 v 30 h -8 z";

  }
  :root {/* Footer */
    /* Layout */
    --mos-footer-padding:var(--space-xs);
    --mos-footer-margin-top:var(--space-xl);
    --mos-footer-gap:var(--space-xs);
    --mos-footer-justify: space-around;
    --mos-footer-align: center;
    --mos-footer-font-family:var(--font-main);
    --mos-footer-font-size:var(--font-size-s);
    --mos-footer-img-size:var(--font-size-l);

    /* Color */
    --mos-footer-background: var(--color-banner);
    --mos-footer-text-main: var(--text-banner);
    --mos-footer-text-link: var(--text-link);
    --mos-footer-text-hover: var(--text-link-hover);
    --mos-footer-shadow: var(--shadow-banner);

    /* Theme Toggle */
    --mos-theme-toggle-size:var(--font-size-l);
    --mos-theme-toggle-background:none;
    --mos-theme-toggle-border:none;
    --mos-theme-toggle-opacity:var(--opacity-button);
    --mos-theme-toggle-opacity-hover:var(--opacity-full);
    --mos-theme-toggle-transition:var(--time-s);

  }
  :root {/* Feedback */
    --feedback-button-background: var(--color-accent);
    --feedback-button-text-color: var(--text-main);
    --feedback-button-opacity:var(--opacity-button);
    --feedback-button-opacity-hover:var(--opacity-full);
    --feedback-button-shadow: var(--shadow-button);
    --feedback-button-border: none;

    --feedback-button-font-size: var(--font-size-s);
    --feedback-button-font-weight: var(--font-weight-xl);
    --feedback-button-height-max:8vh;
    --feedback-button-padding:var(--space-xs);
    --feedback-button-transition:var(--time-m);
    --feedback-button-radius:var(--radius-s);


    --feedback-dialog-background: var(--color-read);
    --feedback-dialog-radius: var(--radius-l);
    --feedback-dialog-text-color: var(--text-main);
    --feedback-dialog-width: min(90vw, 600px);
    --feedback-dialog-height-max: min(80vh, 500px);
    --feedback-dialog-slide-distance: var(--size-l);
    --feedback-dialog-slide-time: var(--time-m);
    --feedback-dialog-opacity-time: var(--time-s);
    --feedback-dialog-padding:var(--space-xl);
    --feedback-dialog-gap: var(--space-l);
    
    --feedback-dialog-blur-transition: var(--time-l);
    --feedback-dialog-blur-ease: var(--ease-standard);
    --feedback-dialog-blur: blur(2px);
    --feedback-dialog-blur-backdrop: oklch(0.2 0 0 / 0.25);
    --feedback-dialog-outer-shadow: var(--shadow-box);

    --feedback-dialog-close-margin:var(--space-m);
    --feedback-dialog-close-color:inherit;
    --feedback-dialog-close-size: var(--font-size-xl);
    --feedback-dialog-close-hover: var(--font-weight-xl);

    --feedback-dialog-label-font-size:var(--font-size-m);
    --feedback-dialog-label-font-weight:var(--font-weight-xl);
    --feedback-dialog-label-margin-bottom:var(--space-s);

    --feedback-dialog-textbox-padding:var(--space-s);
    --feedback-dialog-textbox-radius:var(--radius-s);
    --feedback-dialog-textbox-font-family:var(--font-main);
    --feedback-dialog-textbox-font-size:var(--font-size-s);
    --feedback-dialog-textbox-font-weight:var(--font-weight-m);
    --feedback-dialog-feedback-textbox-height-min:4lh;

    --feedback-dialog-send-background: var(--color-accent);
    --feedback-dialog-send-text-color: var(--text-main);
    --feedback-dialog-send-shadow: var(--shadow-button);
    --feedback-dialog-send-border: none;
    --feedback-dialog-send-font-weight: var(--font-weight-xl);
    --feedback-dialog-send-radius: var(--radius-m);
    --feedback-dialog-send-transition: var(--time-m);
    --feedback-dialog-send-font-size: var(--font-size-m);
    --feedback-dialog-send-padding: var(--space-s) var(--space-m);
    --feedback-dialog-send-opacity: var(--opacity-button);
    --feedback-dialog-send-opacity-hover: var(--opacity-full);

    --feedback-dialog-thanks-color:var(--color-accent);
    --feedback-dialog-thanks-font-size:var(--font-size-l);
    --feedback-dialog-thanks-font-weight:var(--font-weight-xl);

    --feedback-dialog-email-color:var(--text-accent);
    --feedback-dialog-email-font-size:var(--font-size-m);

  }
  :root {/* Home Messy with Local Tags*/
    --card-background-color: var(--color-read);
    --card-text-color: var(--text-main);
  }


}