/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./public/static/css/src/site.main.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/**
 * FONT / Typography
 */
/**
 * Media querie sizes / screen sizes
 */
/**
 * oldschool mediq query based font-size
 */
/**
 dirty hack to use sass-7-1 pattern with vendor and use / forwards
 */
/** implemt like this: https://publishing-project.rivendellweb.net/new-and-upcoming-css-custom-media/ */
/** https://blog.logrocket.com/css-breakpoints-responsive-design/#how-choose-breakpoints **/
/** https://blog.logrocket.com/flexible-layouts-without-media-queries/ **/
/** https://utopia.fyi/space/calculator/?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75%7C0.5,1.5%7C2%7C3%7C4%7C6,s-l&g=s,l,xl,12 */
/* Capability Variables */
/* Preference Variables */
/* sizes / screen sizes */
/** TODO **
/* Named Queries */
@layer framework.base {}
@layer framework.theme {}
@layer framework.typography {}
@layer framework.layout {
  @layer footer {
    FOOTER {
      --_block-size: var(--block-size-footer, var(--layout-size-block-footer));
      inline-size: 100%;
      block-size: var(--_block-size);
    }
  }
}
@layer framework.components {}
@layer framework.utilites {}
@layer framework.overwrites {}
@layer application.typography {
  /**
   * useful links:
   * https://www.launch2success.com/guide/getting-google-font-variable-files/
   * https://webfont.yabe.land/en/misc/convert-ttf-woff2/?source=post_page-----3a89da8d3b04--------------------------------
   * https://material.io/blog/roboto-flex
   * https://web.dev/articles/adapting-typography-to-user-preferences-with-css?hl=en#loading_the_roboto_flex_variable_font
   * https://web.dev/articles/variable-fonts
   *
   * https://v-fonts.com/fonts/roboto-flex
   * eg:
   * https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,slnt,wght,GRAD@8..144,-10..0,100..1000,-200..150&display=swap
   */
  @layer definitions {
    @font-face {
      font-family: "Roboto Flex";
      font-style: oblique 0deg 10deg;
      font-weight: 100 1000;
      font-stretch: 100%;
      font-display: swap;
      src: url("/static/fonts/roboto-flex/RobotoFlex-Latin_opsz,slnt,wght,GRAD.woff2") format("woff2-variations");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
  }
  @layer general {
    :root {
      --typo-weight-light: 300;
      --typo-weight-regular: 400;
      --typo-weight-bold: 700;
      --typo-weight-black: 900;
      --typo-grade-base: 0;
      --typo-slant-base: 0;
      --typo-family: sans-serif;
      --typo-weight: var(--typo-weight-regular);
      --typo-grade: var(--typo-grade-base);
      --typo-slant: var(--typo-slant-base);
    }
    @media (prefers-contrast: more) {
      :root {
        --typo-weight-light: 400;
        --typo-weight-regular: 600;
        --typo-weight-bold: 800;
        --typo-weight-black: 1000;
      }
    }
    @media (prefers-contrast: less) {
      :root {
        --typo-weight-light: 100;
        --typo-weight-regular: 300;
        --typo-weight-bold: 400;
        --typo-weight-black: 7000;
      }
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --typo-grade-base: -0.25 ;
      }
    }
    * {
      font-family: var(--typo-family);
      font-variation-settings: "slnt" var(--typo-slant), "wght" var(--typo-weight), "GRAD" var(--typo-grade);
    }
    BODY {
      --typo-family: "Roboto Flex", sans-serif;
      line-height: 1.6;
    }
    H1, H2, .typo-tw-balaned {
      text-wrap: balance;
    }
    B, STRONG, .typo-strong {
      --typo-weight: var(--typo-weight-bold);
    }
    I, EM, .typo-italic {
      --typo-slant: -10;
    }
  }
}
@layer application.components {
  @layer buttons {
    input[type=file]::-webkit-file-upload-button {
      --_transition:
      	box-shadow 145ms ease,
      	outline-offset 145ms ease ;
      --_padding-inline: 1.75ch;
      --_padding-block: .75ch;
      font: inherit;
      letter-spacing: inherit;
      cursor: pointer;
      touch-action: manipulation;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 1ch;
      padding-block: var(--_padding-block);
      padding-inline: var(--_padding-inline);
      -webkit-user-select: none;
              user-select: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }
    .button,
    button:not([class]),
    input[type=button],
    input[type=submit],
    input[type=reset],
    input[type=file],
    input[type=file]::file-selector-button {
      --_transition:
      	box-shadow 145ms ease,
      	outline-offset 145ms ease ;
      --_padding-inline: 1.75ch;
      --_padding-block: .75ch;
      font: inherit;
      letter-spacing: inherit;
      cursor: pointer;
      touch-action: manipulation;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      gap: 1ch;
      padding-block: var(--_padding-block);
      padding-inline: var(--_padding-inline);
      -webkit-user-select: none;
         -moz-user-select: none;
              user-select: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }
    @media screen and (prefers-reduced-motion: reduce),(update: slow) {
      input[type=file]::-webkit-file-upload-button {
        --_transition: ;
      }
      .button,
      button:not([class]),
      input[type=button],
      input[type=submit],
      input[type=reset],
      input[type=file],
      input[type=file]::file-selector-button {
        --_transition: ;
      }
    }
    input[type=file]::-webkit-file-upload-button:where(:not(:active)):focus-visible {
      outline-offset: 5px;
    }
    .button:where(:not(:active)):focus-visible,
    button:not([class]):where(:not(:active)):focus-visible,
    input[type=button]:where(:not(:active)):focus-visible,
    input[type=submit]:where(:not(:active)):focus-visible,
    input[type=reset]:where(:not(:active)):focus-visible,
    input[type=file]:where(:not(:active)):focus-visible,
    input[type=file]::file-selector-button:where(:not(:active)):focus-visible {
      outline-offset: 5px;
    }
    input[type=file]::-webkit-file-upload-button [disabled] {
      cursor: not-allowed;
    }
    .button [disabled],
    button:not([class]) [disabled],
    input[type=button] [disabled],
    input[type=submit] [disabled],
    input[type=reset] [disabled],
    input[type=file] [disabled],
    input[type=file]::file-selector-button [disabled] {
      cursor: not-allowed;
    }
  }
}