@import "tailwindcss";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-accent-cyan: #0891b2;
  --color-accent-cyan-light: #67e8f9;
  --color-accent-blue: #1e40af;
  --color-accent-blue-light: #93c5fd;
}

@layer base {
  body {
    font-family: "Tiempos Text", serif;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Styrene A", sans-serif;
  }

  /* Gradient effect on h1 and h2 */
  h1,
  h2 {
    background: linear-gradient(
      135deg,
      var(--color-accent-blue) 0%,
      var(--color-accent-cyan) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 100%;
  }

  .dark h1,
  .dark h2 {
    background: linear-gradient(
      135deg,
      var(--color-accent-blue-light) 0%,
      var(--color-accent-cyan-light) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  code,
  kbd,
  samp,
  pre,
  pre code {
    font-family: "Styrene B", monospace;
  }

  /* Accent border on code blocks */
  pre {
    border-left: 4px solid var(--color-accent-cyan);
  }

  .dark pre {
    border-left-color: var(--color-accent-cyan-light);
  }

  mark {
    @apply bg-neutral-200 text-current dark:bg-neutral-600;
  }

  #software + ul {
    @apply flex flex-wrap gap-4 !p-0;
  }

  #software + ul > li {
    @apply !m-0 list-none !p-0;
  }

  #software + ul > li a {
    @apply border border-neutral-300 px-2 py-1 dark:border-neutral-600;
  }
}

/* Styrene A Font Family */
@font-face {
  font-family: "Styrene A";
  src: url("/fonts/styrene/StyreneA-Thin-Trial-BF63f6cbd91263f.otf")
    format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Styrene A";
  src: url("/fonts/styrene/StyreneA-ThinItalic-Trial-BF63f6cbd95634b.otf")
    format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Styrene A";
  src: url("/fonts/styrene/StyreneA-Light-Trial-BF63f6cbd99dc3e.otf")
    format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Styrene A";
  src: url("/fonts/styrene/StyreneA-LightItalic-Trial-BF63f6cbd9cb933.otf")
    format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Styrene A";
  src: url("/fonts/styrene/StyreneA-Regular-Trial-BF63f6cbd970ee9.otf")
    format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Styrene A";
  src: url("/fonts/styrene/StyreneA-RegularItalic-Trial-BF63f6cbd94325f.otf")
    format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Styrene A";
  src: url("/fonts/styrene/StyreneA-Medium-Trial-BF63f6cdb24b6d.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Styrene A";
  src: url("/fonts/styrene/StyreneA-MediumItalic-Trial-BF63f6cbd925a68.otf")
    format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Styrene A";
  src: url("/fonts/styrene/StyreneA-Bold-Trial-BF63f6cbda1877f.otf")
    format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Styrene A";
  src: url("/fonts/styrene/StyreneA-BoldItalic-Trial-BF63f6cbd9bec08.otf")
    format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Styrene A";
  src: url("/fonts/styrene/StyreneA-Black-Trial-BF63f6cbd9da245.otf")
    format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Styrene A";
  src: url("/fonts/styrene/StyreneA-BlackItalic-Trial-BF63f6cbd7cb688.otf")
    format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Styrene B Font Family */
@font-face {
  font-family: "Styrene B";
  src: url("/fonts/styrene/StyreneB-Thin-Trial-BF63f6cc84a4246.otf")
    format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Styrene B";
  src: url("/fonts/styrene/StyreneB-ThinItalic-Trial-BF63f6cbe8d3333.otf")
    format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Styrene B";
  src: url("/fonts/styrene/StyreneB-Light-Trial-BF63f6cbe64b47b.otf")
    format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Styrene B";
  src: url("/fonts/styrene/StyreneB-LightItalic-Trial-BF63f6cbe9d67d1.otf")
    format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Styrene B";
  src: url("/fonts/styrene/StyreneB-Regular-Trial-BF63f6cbe9db1d5.otf")
    format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Styrene B";
  src: url("/fonts/styrene/StyreneB-RegularItalic-Trial-BF63f6cbe5c1942.otf")
    format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Styrene B";
  src: url("/fonts/styrene/StyreneB-Medium-Trial-BF63f6cc85760c2.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Styrene B";
  src: url("/fonts/styrene/StyreneB-MediumItalic-Trial-BF63f6cc84a421a.otf")
    format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Styrene B";
  src: url("/fonts/styrene/StyreneB-Bold-Trial-BF63f6cbe9f13bb.otf")
    format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Styrene B";
  src: url("/fonts/styrene/StyreneB-BoldItalic-Trial-BF63f6cbe6863e6.otf")
    format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Styrene B";
  src: url("/fonts/styrene/StyreneB-Black-Trial-BF63f6cbe3dc69b.otf")
    format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Styrene B";
  src: url("/fonts/styrene/StyreneB-BlackItalic-Trial-BF63f6cbe2d985b.otf")
    format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Tiempos Fine Font Family */
@font-face {
  font-family: "Tiempos Fine";
  src: url("/fonts/tiempos/TestTiemposFine-Light-BF66457a5102792.otf")
    format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Fine";
  src: url("/fonts/tiempos/TestTiemposFine-LightItalic-BF66457a50eb132.otf")
    format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Fine";
  src: url("/fonts/tiempos/TestTiemposFine-Regular-BF66457a50e8bc9.otf")
    format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Fine";
  src: url("/fonts/tiempos/TestTiemposFine-RegularItalic-BF66457a50e36f9.otf")
    format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Fine";
  src: url("/fonts/tiempos/TestTiemposFine-Medium-BF66457a50e62cd.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Fine";
  src: url("/fonts/tiempos/TestTiemposFine-MediumItalic-BF66457a511be83.otf")
    format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Fine";
  src: url("/fonts/tiempos/TestTiemposFine-Semibold-BF66457a50f016a.otf")
    format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Fine";
  src: url("/fonts/tiempos/TestTiemposFine-SemiboldItalic-BF66457a50b0e18.otf")
    format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Fine";
  src: url("/fonts/tiempos/TestTiemposFine-Bold-BF66457a510211b.otf")
    format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Fine";
  src: url("/fonts/tiempos/TestTiemposFine-BoldItalic-BF66457a50b8568.otf")
    format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Fine";
  src: url("/fonts/tiempos/TestTiemposFine-Black-BF66457a508fe8f.otf")
    format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Fine";
  src: url("/fonts/tiempos/TestTiemposFine-BlackItalic-BF66457a510424a.otf")
    format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Tiempos Headline Font Family */
@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos/TestTiemposHeadline-Light-BF66457a50df5a0.otf")
    format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos/TestTiemposHeadline-LightItalic-BF66457a5088153.otf")
    format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos/TestTiemposHeadline-Regular-BF66457a508e31a.otf")
    format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos/TestTiemposHeadline-RegularItalic-BF66457a5091d70.otf")
    format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos/TestTiemposHeadline-Medium-BF66457a509b4ec.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos/TestTiemposHeadline-MediumItalic-BF66457a50b4260.otf")
    format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos/TestTiemposHeadline-Semibold-BF66457a509040b.otf")
    format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos/TestTiemposHeadline-SemiboldItalic-BF66457a510c462.otf")
    format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos/TestTiemposHeadline-Bold-BF66457a5113d17.otf")
    format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos/TestTiemposHeadline-BoldItalic-BF66457a5072af7.otf")
    format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos/TestTiemposHeadline-Black-BF66457a50e385b.otf")
    format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/tiempos/TestTiemposHeadline-BlackItalic-BF66457a505495d.otf")
    format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* Tiempos Text Font Family */
@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos/TestTiemposText-Regular-BF66457a50cd521.otf")
    format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos/TestTiemposText-RegularItalic-BF66457a50421c2.otf")
    format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos/TestTiemposText-Medium-BF66457a508489a.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos/TestTiemposText-MediumItalic-BF66457a508d6d9.otf")
    format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos/TestTiemposText-Semibold-BF66457a4fed201.otf")
    format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos/TestTiemposText-SemiboldItalic-BF66457a505477c.otf")
    format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos/TestTiemposText-Bold-BF66457a4f03c40.otf")
    format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/tiempos/TestTiemposText-BoldItalic-BF66457a50155b4.otf")
    format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
