@tailwind base;
@tailwind components;
@tailwind utilities;
@import url(https://files.xeiaso.net/static/font/inter/inter.css);
@import url(https://cdn.xeiaso.net/static/css/iosevka/family.css);

@font-face {
  font-family: "Podkova";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("static/font/Podkova.woff2") format("woff2");
}

/* latin-ext */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(static/font/schibsted-grotesk-italic-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url(static/font/schibsted-grotesk-italic-latin.woff2) format("woff2");
  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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(static/font/schibsted-grotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(static/font/schibsted-grotesk-latin.woff2) format("woff2");
  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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer base {
  a {
    @apply text-link-light-normal hover:text-link-light-hover hover:bg-link-light-hoverBg visited:text-link-light-visited visited:hover:text-link-light-visitedHover visited:hover:bg-link-light-visitedHoverBg underline;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-serif;
  }

  details {
    @apply p-4 bg-bg-soft;
  }

  @media (prefers-color-scheme: dark) {
    a {
      @apply text-link-dark-normal hover:text-link-dark-hover hover:bg-link-dark-hoverBg visited:text-link-dark-visited visited:hover:text-link-dark-visitedHover visited:hover:bg-link-dark-visitedHoverBg;
    }

    details {
      @apply bg-bgDark-soft;
    }
  }

  .prose figcaption {
    @apply mx-auto mt-2 w-3/4 text-center text-sm text-gray-600 dark:text-gray-300;
  }

  .convsnippet p:first-of-type {
    @apply mt-0;
    display: inline;
  }

  .xe-dont-newline p:first-of-type {
    @apply mt-0;
    display: inline;
  }

  .convsnippet p + p {
    @apply mt-4;
  }

  .xe-dont-newline p + p {
    @apply mt-4;
  }

  .logo-wumbo {
    background-color: #fdf5d7;
    -webkit-mask: url("/static/img/xeiaso.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask: url("/static/img/xeiaso.svg");
    mask-repeat: no-repeat;
    mask-size: 100%;
    width: 9.5em;
    height: 16em;
    display: inline-block;
  }

  @media (prefers-color-scheme: light) {
    .logo-wumbo {
      background-color: #1d2021;
    }
  }

  /**
 * Gruvbox dark theme
 *
 * Adapted from a theme based on:
 * Vim Gruvbox dark Theme (https://github.com/morhetz/gruvbox)
 *
 * @author Azat S. <to@azat.io>
 * @version 1.0
 */

  code[class*="language-"],
  pre[class*="language-"] {
    color: #ebdbb2; /* fg1 / fg */
    font-family: "Iosevka Curly Iaso", Consolas, Monaco, "Andale Mono",
      monospace;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    line-height: 1.5;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }

  pre[class*="language-"]::-moz-selection,
  pre[class*="language-"] ::-moz-selection,
  code[class*="language-"]::-moz-selection,
  code[class*="language-"] ::-moz-selection {
    color: #fbf1c7; /* fg0 */
    background: #7c6f64; /* bg4 */
  }

  pre[class*="language-"]::selection,
  pre[class*="language-"] ::selection,
  code[class*="language-"]::selection,
  code[class*="language-"] ::selection {
    color: #fbf1c7; /* fg0 */
    background: #7c6f64; /* bg4 */
  }

  /* Code blocks */
  pre[class*="language-"] {
    padding: 1em;
    overflow: auto;

    @apply mx-auto;
  }

  :not(pre) > code[class*="language-"],
  pre[class*="language-"] {
    background: #1d2021; /* bg0_h */
  }

  /* Inline code */
  :not(pre) > code[class*="language-"] {
    padding: 0.1em;
    border-radius: 0.3em;
  }

  .token.comment,
  .token.prolog,
  .token.cdata {
    color: #a89984; /* fg4 / gray1 */
  }

  .token.delimiter,
  .token.boolean,
  .token.keyword,
  .token.selector,
  .token.important,
  .token.atrule {
    color: #fb4934; /* red2 */
  }

  .token.operator,
  .token.punctuation,
  .token.attr-name {
    color: #a89984; /* fg4 / gray1 */
  }

  .token.tag,
  .token.tag .punctuation,
  .token.doctype,
  .token.builtin {
    color: #fabd2f; /* yellow2 */
  }

  .token.entity,
  .token.number,
  .token.symbol {
    color: #d3869b; /* purple2 */
  }

  .token.property,
  .token.constant,
  .token.variable {
    color: #fb4934; /* red2 */
  }

  .token.string,
  .token.char {
    color: #b8bb26; /* green2 */
  }

  .token.attr-value,
  .token.attr-value .punctuation {
    color: #a89984; /* fg4 / gray1 */
  }

  .token.url {
    color: #b8bb26; /* green2 */
    text-decoration: underline;
  }

  .token.function {
    color: #fabd2f; /* yellow2 */
  }

  .token.regex {
    background: #b8bb26; /* green2 */
  }

  .token.bold {
    font-weight: bold;
  }

  .token.italic {
    font-style: italic;
  }

  .token.inserted {
    background: #a89984; /* fg4 / gray1 */
  }

  .token.deleted {
    background: #fb4934; /* red2 */
  }
}