/* CLIENT-SPECIFIC THEMING and CHANGES: colors, fonts, etc. for this client only */

@layer theme {

   /* Optional: move these to a global @layer fonts if shared by many clients */
   @font-face {
      font-family: "teko-m";
      src: url("../fonts/teko-m.ttf");
   }

   @font-face {
      font-family: "teko-l";
      src: url("../fonts/teko-l.ttf");
   }

   @font-face {
      font-family: "monts-m";
      src: url("../fonts/monts-m.ttf");
   }

   @font-face {
      font-family: "monts-r";
      src: url("../fonts/monts-r.ttf");
   }

   @font-face {
      font-family: "monts-b";
      src: url("../fonts/monts-b.ttf");
   }

   @font-face {
      font-family: "monts-sb";
      src: url("../fonts/monts-sb.ttf");
   }

   @font-face {
      font-family: "monts-t";
      src: url("../fonts/monts-t.ttf");
   }

   @font-face {
      font-family: "opens-l";
      src: url("../fonts/opens-l.ttf");
   }

   @font-face {
      font-family: "opens-r";
      src: url("../fonts/opens-r.ttf");
   }

   @font-face {
      font-family: "opens-sb";
      src: url("../fonts/opens-sb.ttf");
   }

   @font-face {
      font-family: "opens-m";
      src: url("../fonts/opens-m.ttf");
   }

   @font-face {
      font-family: "opens-b";
      src: url("../fonts/opens-b.ttf");
   }

   @font-face {
      font-family: "opens-cdl";
      src: url("../fonts/opens-cdl.ttf");
   }

   @font-face {
      font-family: "opens-cdm";
      src: url("../fonts/opens-cdm.ttf");
   }

   :root {
      /* colors */
      --color-bg: var(--whit);
      --color-fg: var(--zero-dark);
      --color-subtle: #b1b1b1;
      --color-muted: #595959;
      --link: #C16100;
      --color-accent: #C10000;

      /* families (your client choices) */
      --font-body: opens-r, Lato, sans-serif;
      --font-body-lt: opens-l, Lato, sans-serif;
      --font-body-md: opens-m, Lato, sans-serif;
      --font-body-sb: opens-sb, Lato, sans-serif;
      --font-body-b: opens-b, Lato, sans-serif;
      --font-forms: monts-sb, "Arial Bold", sans-serif;
      --font-buttons: monts-m, Arial, sans-serif;
      --font-quote: monts-r, Arial, sans-serif;
      --font-nav: teko-l, Arial, sans-serif;
      --font-h1: teko-m, Arial, sans-serif;
      --font-h2: monts-t, Tahoma, sans-serif;
      --font-h3: teko-l, "Arial Narrow", sans-serif;
      --font-h4: monts-m, Arial, sans-serif;
      --font-h5: monts-r, Arial, sans-serif;
      --font-h6: monts-b, "Arial Black", sans-serif;

      --fontb: var(--font-body);
      --fontbl: var(--font-body-lt);
      --fontbm: var(--font-body-md);
      --fontbsb: var(--font-body-sb);
      --fontbb: var(--font-body-b);
      --fontf: var(--font-forms);
      --fontt: var(--font-buttons);
      --fontn: var(--font-nav);
      --font1: var(--font-h1);
      --font2: var(--font-h2);
      --font3: var(--font-h3);
      --font4: var(--font-h4);
      --font5: var(--font-h5);
      --font6: var(--font-h6);

      --fs-multiplier: 1;

      --fs-h1: clamp(3rem, calc(2rem + 5vw), calc(5rem * var(--fs-multiplier)));
      --fs-h2: clamp(1.5rem, calc(1rem + 3vw), calc(2.5rem * var(--fs-multiplier)));
      --fs-h3: clamp(1.4rem, calc(1rem + 2.75vw), calc(2.8rem * var(--fs-multiplier)));
      --fs-h4: clamp(1.3rem, calc(1rem + 2.5vw), calc(2.67rem * var(--fs-multiplier)));
      --fs-h5: clamp(1.2rem, calc(0.9rem + 2vw), calc(2.38rem * var(--fs-multiplier)));
      --fs-h6: clamp(1rem, calc(0.5rem + 1vw), calc(1.3rem * var(--fs-multiplier)));
      --fs-nav: clamp(1.1rem, calc(0.85rem + 1.8vw), calc(2.48rem * var(--fs-multiplier)));
   }

   body {
      background: var(--color-bg);
      color: var(--color-fg);
   }

   .accent {
      color: var(--color-accent);
   }

   .accent-1 {
      color: var(--moss-green);
   }

   .accent-2 {
      color: var(--alloy-orange);
      font-weight: 300l;
   }

   .wyoming {
      color: var(--battleship-gray);
   }

   .sm {
      font-size: var(--fs-sm);
      letter-spacing: .5pt;
   }

   .med {
      font-size: var(--fs-md);
      letter-spacing: 1pt;
   }

   .bg {
      font-size: var(--fs-lg);
      letter-spacing: 1.5pt;
   }

   .txt-wide {
      letter-spacing: calc(var(--ls-normal) * var(--ls-wide-factor, 1.5));
   }

   .txt-wider {
      letter-spacing: calc(var(--ls-normal) * var(--ls-wide-factor, 2));
   }

   .txt-narrow {
      letter-spacing: calc(var(--ls-normal) * var(--ls-narrow-factor, -1));
   }

   .bold {
      font-weight: bolder;
   }

   .portfolio {
      border: 1px solid var(--color-subtle);
      padding: 20px 20px 0 10px;
      width: 40%;
      margin: 0 0 0 100px;
   }

   /* When the `.portfolio` article is used inside the `.content-area.portfolio` section
      we want the outer section to control layout and positioning. Clear the fixed
      width/margin on larger screens so the styling in `styling.css` can push the
      whole section to the right. */
   @media (min-width: 48rem) {
      .content-area.portfolio > .portfolio {
         width: auto;
         margin: 0;
         padding-inline: 0; /* let grid/gutters control spacing */
      }
   }

   .trans {
      opacity: 0.4;
   }

   /* Example scoped hook if tokens alone aren’t enough 
   .btn[data-variant="outline"] {
      background: transparent;
      color: var(--color-fg);
      border: 1px solid var(--color-fg);
   }*/
}