CodePen Embed - [color-scheme] + [semi-fluid typography] Acumin Pro

<header class="sticky">
  <fieldset id="color-scheme">
    <label for="system" tabindex="0"><input type="radio" id="system" name="theme" value="system" checked /> Sys</label>
    <label for="light" tabindex="0"><input type="radio" id="light" name="theme" value="light" /> Light</label>
    <label for="dark" tabindex="0"><input type="radio" id="dark" name="theme" value="dark" /> Dark</label>
  </fieldset>
</header>

<main class="demo grid--container">

  <div class="row">
    <section class="headline--xxl type">
      <header>
        <ul class="attributes">
          <li class="name">h1.xxl</li>
          <li class="size">28.68px <-> 119.21px</li>
          <li class="var">--fs-9</li>
          <li class="font">Acumin Pro Wide</li>
          <li class="weight">800 / Black</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>

      </header>

      <section class="preview">
        <h1 class="xx-large">Lorem ipsum dolor sit amet.</h1>
      </section>
    </section>
  </div>

  <div class="row">
    <!-- H1 | XL -->
    <section class="headline--xl type">
      <header>
        <ul class="attributes">
          <li class="name">h1.xl</li>
          <li class="size">26.88px <-> 95.37px</li>
          <li class="var">--fs-8</li>
          <li class="font">Acumin Pro Wide</li>
          <li class="weight">700 / Bold</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" checked /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview secondary">
        <h1 class="x-large">Lorem ipsum dolor sit amet, consectetur.</h1>
      </section>
    </section>

    <!-- H1 | LG -->
    <section class="headline--l type">
      <header>
        <ul class="attributes">
          <li class="name">h1.lg</li>
          <li class="size">25.19px <-> 76.29px</li>
          <li class="var">--fs-7</li>
          <li class="font">Acumin Pro Wide</li>
          <li class="weight">700 / Bold</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview secondary">
        <h1 class="large">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
      </section>
    </section>
  </div>

  <!--  <div class="row">

  
  </div> -->

  <div class="row">

    <!-- H1 -->
    <section class="headline--default type">
      <header>
        <ul class="attributes">
          <li class="name">h1</li>
          <li class="size">23.61px <-> 61.04px</li>
          <li class="var">--fs-6</li>
          <li class="font">Acumin Pro Wide</li>
          <li class="weight">700 / Bold</li>
          <!--          <li class="class">h1<span class="secondary">||</span>.h1</li> -->
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview">
        <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam.</h1>
      </section>
    </section>
  </div>

  <div class="row">
    <!-- H2 | Wide -->
    <section class="h2--default type">
      <header>
        <ul class="attributes">
          <li class="class">h2</li>
          <li class="size">22.13px <-> 48.83px</li>
          <li class="var">--fs-5</li>
          <li class="font">Acumin Pro Wide</li>
          <li class="weight">700 / Bold</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h2>
      </section>
    </section>

    <!-- H2 | Regular -->
    <section class="h2--regular type">
      <header>
        <ul class="attributes">
          <li class="class">h2.regular</li>
          <li class="size">22.13px <-> 48.83px</li>
          <li class="var">--fs-5</li>
          <li class="font">Acumin Pro</li>
          <li class="weight">600 / Semibold</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview">
        <h2 class="regular secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h2>
      </section>
    </section>

  </div>

  <div class="row">
    <!-- H3 | Wide -->
    <section class="h3--default type">
      <header>
        <ul class="attributes">
          <li class="class">h3</li>
          <li class="size">20.74px <-> 39.06px</li>
          <li class="var">--fs-4</li>
          <li class="font">Acumin Pro Wide</li>
          <li class="weight">600 / Semibold</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview">
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h3>
      </section>
    </section>

    <!-- H3 | Regular -->
    <section class="h3--regular type">
      <header>
        <ul class="attributes">
          <li class="class">h3.regular</li>
          <li class="size">20.74px <-> 39.06px</li>
          <li class="var">--fs-4</li>
          <li class="font">Acumin Pro</li>
          <li class="weight">500 / Medium</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview">
        <h3 class="regular secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h3>
      </section>
    </section>
  </div>

  <div class="row">
    <!-- H4 | Wide -->
    <section class="h4--default type">
      <header>
        <ul class="attributes">
          <li class="class">h4</li>
          <li class="size">19.44px <-> 31.25px</li>
          <li class="var">--fs-3</li>
          <li class="font">Acumin Pro Wide</li>
          <li class="weight">400 / Regular</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview">
        <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h4>
      </section>
    </section>

    <!-- H4 | Regular -->
    <section class="h4--regular type">
      <header>
        <ul class="attributes">
          <li class="class">h4.regular</li>
          <li class="size">19.44px <-> 31.25px</li>
          <li class="var">--fs-3</li>
          <li class="font">Acumin Pro</li>
          <li class="weight">500 / Medium</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview">
        <h4 class="regular">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h4>
      </section>
    </section>

    <!-- H4 | Semicondensed -->
    <!--    <section class="h4--semicondensed type">
      <header>
        <ul class="attributes">
          <li class="class">h4.semicondensed<span class="secondary">||</span>.h4.semicondensed</li>
          <li class="size">19.44px <-> 31.25px</li>
          <li class="var">--fs-3</li>
          <li class="font">Acumin Pro Semicondensed</li>
          <li class="weight">700 / Bold</li>
        </ul>
      </header>
      <section class="preview secondary">
        <h4 class="semicondensed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h4>
      </section>
    </section> -->

    <!-- H4 | Condensed -->
    <section class="h4--condensed type">
      <header>
        <ul class="attributes">
          <li class="class">h4.condensed</li>
          <li class="size">19.44px <-> 31.25px</li>
          <li class="var">--fs-3</li>
          <li class="font">Acumin Pro Condensed</li>
          <li class="weight">600 / Semibold</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview secondary">
        <h4 class="condensed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h4>
      </section>
    </section>
  </div>

  <div class="row">
    <!-- H5 | Wide -->
    <section class="h5--default type">
      <header>
        <ul class="attributes">
          <li class="class">h5</li>
          <li class="size">18.22px <-> 25px</li>
          <li class="var">--fs-2</li>
          <li class="font">Acumin Pro Wide</li>
          <li class="weight">500 / Medium</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview">
        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h5>
      </section>
    </section>

    <!-- h5 | Regular -->
    <section class="h5--regular type">
      <header>
        <ul class="attributes">
          <li class="class">h5.regular</li>
          <li class="size">18.22px <-> 25px</li>
          <li class="var">--fs-2</li>
          <li class="font">Acumin Pro</li>
          <li class="weight">600 / Semibold</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview secondary">
        <h5 class="regular">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h5>
      </section>
    </section>

    <!-- h5 | Semicondensed -->
    <!--    <section class="h5--semicondensed type">
      <header>
        <ul class="attributes">
          <li class="class">h5.semicondensed<span class="secondary">||</span>.h5.semicondensed</li>
          <li class="size">18.22px <-> 25px</li>
          <li class="var">--fs-2</li>
          <li class="font">Acumin Pro Semicondensed</li>
          <li class="weight">700 / Bold</li>
        </ul>
      </header>
      <section class="preview secondary">
        <h5 class="semicondensed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h5>
      </section>
    </section> -->

    <!-- h5 | Condensed -->
    <section class="h5--condensed type">
      <header>
        <ul class="attributes">
          <li class="class">h5.condensed</li>
          <li class="size">18.22px <-> 25px</li>
          <li class="var">--fs-2</li>
          <li class="font">Acumin Pro Condensed</li>
          <li class="weight">600 / Semibold</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview">
        <h5 class="condensed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h5>
      </section>
    </section>
  </div>

  <div class="row">
    <!-- H6 | Wide -->
    <section class="h6--default type">
      <header>
        <ul class="attributes">
          <li class="class">h6</li>
          <li class="size">16px (1rem)</li>
          <li class="var">--fs-0</li>
          <li class="font">Acumin Pro Wide</li>
          <li class="weight">500 / Medium</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview">
        <h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h6>
      </section>
    </section>

    <!-- H6 | Condensed -->
    <section class="h6--condensed type">
      <header>
        <ul class="attributes">
          <!--          <li class="name">H6 [Condensed]</li> -->
          <li class="class">h6.condensed</li>
          <li class="size">16px (1rem)</li>
          <li class="var">--fs-0</li>
          <li class="font">Acumin Pro Condensed</li>
          <li class="weight">700 / Bold</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview secondary">
        <h6 class="condensed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus nulla, facilisis sit amet quam eu, sagittis mattis diam. Nam turpis ante, congue luctus dictum quis, sagittis fermentum eros.</h6>
      </section>
    </section>
  </div>

  <div class="row">
    <!-- p | XL -->
    <section class="p--xl type">
      <header>
        <ul class="attributes">
          <!--          <li class="name">Paragraph [XL]</li> -->
          <li class="class">p.xl</li>
          <li class="size">18.22px <-> 25px</li>
          <li class="var">--fs-2</li>
          <li class="font">Acumin Pro</li>
          <li class="weight">400 / Regular</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview">
        <p class="xl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a finibus leo. Phasellus at risus tellus. Duis euismod nisi quis dolor auctor sollicitudin. Donec malesuada turpis neque, vel suscipit ipsum ultricies eu. Sed ultrices viverra imperdiet. Donec magna purus, vulputate ac ex id, porta ullamcorper neque. Morbi tristique pellentesque condimentum. Mauris ut sapien id purus congue porta nec ut risus. Sed risus enim, vestibulum vitae metus in, tempor fringilla justo. Duis malesuada ipsum eget consectetur accumsan. Aliquam nec tincidunt diam. Mauris gravida orci sit amet purus rhoncus, id tempus orci accumsan. Suspendisse potenti.</p>
      </section>
    </section>
  </div>

  <div class="row">
    <!-- p | L -->
    <section class="para--lg type">
      <header>
        <ul class="attributes">
          <li class="class">p.lg</li>
          <li class="size">17.07px <-> 20px</li>
          <li class="var">--fs-1</li>
          <li class="font">Acumin Pro</li>
          <li class="weight">400 / Regular</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview">
        <p class="lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a finibus leo. Phasellus at risus tellus. Duis euismod nisi quis dolor auctor sollicitudin. Donec malesuada turpis neque, vel suscipit ipsum ultricies eu. Sed ultrices viverra imperdiet. Donec magna purus, vulputate ac ex id, porta ullamcorper neque. Morbi tristique pellentesque condimentum. Mauris ut sapien id purus congue porta nec ut risus. Sed risus enim, vestibulum vitae metus in, tempor fringilla justo. Duis malesuada ipsum eget consectetur accumsan. Aliquam nec tincidunt diam. Mauris gravida orci sit amet purus rhoncus, id tempus orci accumsan. Suspendisse potenti.</p>
      </section>
    </section>

    <!-- p -->
    <section class="para type">
      <header>
        <ul class="attributes">
          <li class="class">p</li>
          <li class="size">16px (1rem)</li>
          <li class="var">--fs-0</li>
          <li class="font">Acumin Pro</li>
          <li class="weight">400 / Regular</li>
          <li class="hyphenate">
            <label><input type="checkbox" class="hyphens" /> hyphenate</label>
          </li>
        </ul>
      </header>
      <section class="preview">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a finibus leo. Phasellus at risus tellus. Duis euismod nisi quis dolor auctor sollicitudin. Donec malesuada turpis neque, vel suscipit ipsum ultricies eu. Sed ultrices viverra imperdiet. Donec magna purus, vulputate ac ex id, porta ullamcorper neque. Morbi tristique pellentesque condimentum. Mauris ut sapien id purus congue porta nec ut risus. Sed risus enim, vestibulum vitae metus in, tempor fringilla justo. Duis malesuada ipsum eget consectetur accumsan. Aliquam nec tincidunt diam. Mauris gravida orci sit amet purus rhoncus, id tempus orci accumsan. Suspendisse potenti.</p>

        <p>Nam placerat purus sit amet malesuada sollicitudin. Nam efficitur sed massa ut lobortis. Sed at urna ac ante condimentum cursus. Donec vitae accumsan ligula. In molestie urna ac metus lobortis mattis. Mauris dolor orci, vestibulum vitae ipsum ut, euismod venenatis felis. Ut nec molestie velit, ac dapibus nisl. Nunc sed gravida purus. Ut gravida nec leo quis finibus. Donec at dignissim risus. Vivamus quam enim, imperdiet in urna ac, consequat lobortis nisl.</p>
      </section>
    </section>
  </div>

</main>

:root { 
  // ---
  // # Palette
  
  // ## Defaults
  --true-black: #000;
  --true-white: #fff;
  
  // ## Customs
  // #ffdf00
  --yellow--l: 90.27%;
  --yellow--c: 0.1869073130516429;
  --yellow--h: 98.6712655082053;
  --yellow: var(--yellow--l) var(--yellow--c) var(--yellow--h);

  // -- #f8f8f7
  --offwhite--l: 97.89%;
  --offwhite--c: 0.001;
  --offwhite--h: 106.42;
  --offwhite: var(--offwhite--l) var(--offwhite--c) var(--offwhite--h);

  // -- #141301
  --black--l: 18.23%;
  --black--c: 0.036;
  --black--h: 106.98;
  --black: var(--black--l) var(--black--c) var(--black--h);

  // ## Theme 1
  --theme-1--black: var(--black);
  --theme-1--white: var(--offwhite);

  --theme-1--mix: color-mix(
    in oklab,
    oklch(var(--theme-1--black)),
    oklch(var(--theme-1--white))
  );
  --theme-1--mix-dark: color-mix(
    in oklab,
    oklch(var(--theme-1--black) / 20%),
    oklch(var(--theme-1--white) / 20%)
  );

  --theme-1--accent: var(--yellow);

  // ---
  // # Typography
  
  // ## Sizing
  
  // ### Typescale
  // ---- Base: 16px / 100% / 1em
  
  // #### Static
  // ---- https://type-scale.com/
  // ---- 1.250 Major Third
  
  // #### Fluid
  // ---- https://utopia.fyi/type/calculator?c=320,16,1.067,1240,16,1.25,9,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12

  
  // ### Settings
  
  // #### Always Static
  // ---- x-small - base
  --fs--3: 0.512rem; // 8.19px
  --fs--2: 0.64rem; // 10.24px
  --fs--1: 0.8rem; // 12.8px
  --fs-0: 1rem; // 16px [H6] [P]

  // #### Always Dynamic
  // ---- lg - xxl
  --fs-1: clamp(1.07rem, calc(1rem + 0.32vw), 1.25rem); // 17.07px <-> 20px
  --fs-2: clamp(1.14rem, calc(0.99rem + 0.74vw), 1.56rem); // 18.22px <-> 25px
  --fs-3: clamp(1.22rem, calc(0.96rem + 1.28vw), 1.95rem); // 19.44px <-> 31.25px
  --fs-4: clamp(1.3rem, calc(0.9rem + 1.99vw), 2.44rem); // 20.74px <-> 39.06px
  --fs-5: clamp(1.38rem, calc(0.8rem + 2.9vw), 3.05rem); // 22.13px <-> 48.83px
  --fs-6: clamp(1.48rem, calc(0.66rem + 4.07vw), 3.82rem); // 23.61px <-> 61.04px
  --fs-7: clamp(1.57rem, calc(0.46rem + 5.55vw), 4.77rem); // 25.19px <-> 76.29px
  --fs-8: clamp(1.68rem, calc(0.19rem + 7.44vw), 5.96rem); // 26.88px <-> 95.37px
  --fs-9: clamp(1.79rem, calc(-0.18rem + 9.84vw), 7.45rem); // 28.68px <-> 119.21px

  // ## Fonts
  // -- Acumin
  --regular: acumin-pro, sans-serif;
  --wide: acumin-pro-wide, sans-serif;
  --condensed: acumin-pro-condensed, sans-serif;
  --semicondensed: acumin-pro-semi-condensed, sans-serif;

  // ## Weights
  // 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  --fw-ultra-black: 900;
  --fw-black: 800;
  --fw-bold: 700;
  --fw-semibold: 600;
  --fw-medium: 500;
  --fw-regular: 400;
  --fw-light: 300;
  --fw-extra-light: 200;
  --fw-thin: 100;
  
  
  // ---
  // # Theme Defaults
  color-scheme: light dark;
  background: light-dark(
    oklch(var(--theme-1--white)),
    oklch(var(--theme-1--black))
  );
  color: light-dark(oklch(var(--theme-1--black)), oklch(var(--theme-1--white)));

  font-family: var(--regular);
  font-size: var(--fs-0);
  line-height: 1.2;
  text-rendering: optimizeLegibility;

  &:has(#color-scheme input[value="dark"]:checked) {
    color-scheme: dark;
  }

  &:has(#color-scheme input[value="light"]:checked) {
    color-scheme: light;
  }

  // Still needed?
  // @media (prefers-color-scheme: dark) {
  //  &:has(#color-scheme input[value="system"]:checked) {
  //    color-scheme: dark;
  //  }
  // }

  
  // ---
  // # DEMO STYLES
  // 300 | 400 | 500 | 600 | 700
  --mono: "Fira Code", monospace;
  --header-border--w: 4rem;

  // ## Grids
  --12-col: calc(100vw - 12%);
  --gap: 18px;
  --col: calc(var(--12-col) / 12);
} 


// ---
// # UA Resets + Overrides
*,
*:before,
*:after {
  color-scheme: inherit;

  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  gap: 0.5rem;
}


// ---
// # Typography
@font-face {
  font-family: "Fira Code";
  src: url("https://assets.codepen.io/2392/FiraCode-VF.woff2");
  font-style: normal;
  font-weight: 300 700;
  // font-feature-settings: "ss01", "ss02", "ss03", "ss04", "ss05", "ss06", "zero", "onum";
}


h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
p {
  font-size: var(--size);
  font-weight: var(--weight);
  letter-spacing: var(--leading);
  line-height: var(--lh);
  margin: 0 0 2ex 0;

  &:only-of-type,
  &:last-of-type {
    margin: 0;
  }
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  @extend .wide;
}

h1,
.h1 {
  --lh: 1.8ex;
  --size: var(--fs-6);
  --weight: var(--fw-bold);
  --leading: -0.03ch;

  &.large {
    --size: var(--fs-7);
  }

  &.x-large {
    --size: var(--fs-8);
  }

  &.xx-large {
    --lh: 1.6ex;
    --size: var(--fs-9);
    --weight: var(--fw-black);
    text-transform: uppercase;
  }
}

h2,
.h2 {
  --leading: -0.048ch;
  --size: var(--fs-5);
  --weight: var(--fw-bold);

  &.regular {
    --leading: -0.03ch;
    --weight: var(--fw-semibold);
  }
}

h3,
.h3 {
  --size: var(--fs-4);
  --weight: var(--fw-semibold);

  &.regular {
    --weight: var(--fw-medium);
  }
}

h4,
.h4 {
  --size: var(--fs-2);
  --weight: var(--fw-regular);

  &.regular {
    --weight: var(--fw-medium);
  }

  &.condensed {
    --weight: var(--fw-semibold);
  }
}

h5,
.h5 {
  --size: var(--fs-1);
  --weight: var(--fw-semibold);
  // --weight: var(--fw-medium);

  // &.regular { --weight: var(--fw-semibold);  }
  // &.condensed { --weight: var(--fw-semibold);  }
}

h6,
.h6 {
  --size: var(--fs-0);
  --weight: var(--fw-medium);

  &.condensed {
    --weight: var(--fw-bold);
  }
}

p {
  --lh: 2.7ex;
  --size: var(--fs-0);

  &.lg {
    --size: var(--fs-1);
  }

  &.xl {
    --size: var(--fs-2);
  }
}

.regular {
  font-family: var(--regular);
}
.wide {
  font-family: var(--wide);
}
.semicondensed {
  font-family: var(--semicondensed);
}
.condensed {
  font-family: var(--condensed);
  text-transform: uppercase;
}

.unused {
  opacity: 0.15;
}
.secondary {
  opacity: 0.6;
}

@mixin pill-container() {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@mixin pill() {
  --light--pill-text: oklch(var(--theme-1--black) / 0.75);
  --light--pill-border: oklch(var(--theme-1--black) / 0.15);

  --dark--pill-text: oklch(var(--theme-1--white) / 0.75);
  --dark--pill-border: oklch(var(--theme-1--white) / 0.15);

  list-style: none;

  border-radius: 60px;
  border: 2px solid
    light-dark(var(--light--pill-border), var(--dark--pill-border));
  color: light-dark(var(--light--pill-text), var(--dark--pill-text));

  display: flex;
  align-items: center;
  gap: 0.5rem;

  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 1ex 2ch 0.8ex;

  &:has(label) {
    padding: 0;

    label {
      padding: 1ex 2ch 0.8ex;
    }
  }
}

ul.attributes {
  @include pill-container();

  li {
    @include pill();
  }
}


// ~ Links + Button Style Placeholder ~ //



// # Demo Styles
header.sticky label {
  transition-property: color, background;
  transition-duration: 0.3s;
}

main.demo {
  transition-property: background;
  transition-duration: 0.3s;
}

header.sticky {
  position: sticky;
  top: 0;

  background: light-dark(
    oklch(var(--theme-1--black)),
    oklch(var(--theme-1--white))
  );
  border-bottom: var(--header-border--w) solid
    light-dark(oklch(var(--theme-1--white)), oklch(var(--theme-1--black)));
  color: light-dark(oklch(var(--theme-1--white)), oklch(var(--theme-1--black)));

  z-index: 5;
}

fieldset[id="color-scheme"] {
  display: flex;

  label {
    --gap: 0.66rem;
    flex: 1;
    @extend .wide;
    font-size: var(--fs--1);
    font-weight: var(--fw-regular);
    gap: var(--gap);
    margin: 0;
    padding: 1.8rem 6%;
    text-transform: uppercase;

    align-items: center;

    input {
      margin-left: calc(var(--gap) * -1);

      appearance: none;
      border-radius: 50%;
      outline: 2px solid
        light-dark(
          oklch(var(--theme-1--white) / 0.75),
          oklch(var(--theme-1--black) / 0.75)
        );
      outline-offset: 2px;
      height: 0.5rem;
      width: 0.5rem;

      &:checked {
        background: oklch(var(--theme-1--accent));
        outline-color: oklch(var(--theme-1--accent));
      }
    }

    &:hover {
      background: oklch(var(--theme-1--accent));
      color: oklch(var(--theme-1--black));

      input {
        outline-color: currentColor;
        &:checked {
          background: currentColor;
        }
      }
    }

    &:has(input:checked) {
      background: light-dark(
        oklch(var(--theme-1--white)),
        oklch(var(--theme-1--black))
      );
      color: light-dark(
        oklch(var(--theme-1--black)),
        oklch(var(--theme-1--white))
      );
      font-weight: var(--fw-semibold);
    }
  }
}

main.demo {
  border-inline: 3dvw solid
    light-dark(oklch(var(--theme-1--white)), oklch(var(--theme-1--black)));
  background: var(--theme-1--mix-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 1px;

  .row:first-child section.type {
    padding-top: 0;

    @media screen and (min-width: 960px) {
      padding-top: 3dvh;
    }
  }

  section.type {
    // for gap as border
    background: light-dark(
      oklch(var(--theme-1--white)),
      oklch(var(--theme-1--black))
    );

    // for hyphens: initial
    overflow: hidden;
    min-width: 100%;
    flex: 1;
    padding-block: 3dvh;
    padding-inline: 3dvw;

    @media screen and (min-width: 600px) {
      padding-block: 6dvh;
      min-width: 48%;
    }

    header {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;

      position: relative;
      z-index: 3;

      li:has(:checked) {
        background: light-dark(var(--light--pill-border), var(--dark--pill-border));
        color: light-dark(var(--light--pill-text), var(--dark--pill-text));
      }

      input[type="checkbox"] {
        appearance: none;
        border-radius: 2px;
        margin-top: -1px;
        height: 12px;
        width: 12px;

        border: 2px solid
          light-dark(var(--light--pill-border), var(--dark--pill-border));

        &:checked {
          background: oklch(var(--theme-1--accent));
        }
      }
    }

    &:has(input.hyphens:checked) .preview {
      hyphens: auto;
      overflow: initial;
    }
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    width: 100%;
  }
}

hr {
  margin-block: 30px;
  opacity: 0.15;
}

@media screen and (min-width: 960px) {
  .row {
    flex-wrap: nowrap;
  }
}

View Compiled

This Pen is owned by mandynicole on CodePen.

See more by @mandynicole on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.