@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&display=swap");

@import "tailwindcss";
@plugin "@iconify/tailwind4";

@import "components/arrow-button.css" layer(components);
@import "components/devicon.css" layer(components);
@import "components/langs.css" layer(components);
@import "components/navbar.css" layer(components);
@import "components/splash.css" layer(components);
@import "components/split-icon.css" layer(components);

@custom-variant dark (&:where([data-theme=neon], [data-theme=neon] *));

/* Default dark theme "Neon" */
@theme {
  --color-brand: oklch(0.5867 0.1955 2.08);
  --color-brand-dark: oklch(0.5467 0.1955 2.08);
  --color-brand-darker: oklch(0.5067 0.1955 2.08);
  --color-brand-darkest: oklch(0.4667 0.1955 2.08);

  --color-bg: oklch(0.1831 0.004 285.99);
  --color-bg-sub: oklch(0.1931 0.004 285.99);
  --color-main-bg: oklch(0.2031 0.004 285.99);

  --color-fg: oklch(0.9911 0.004 285.99);
  --color-main-fg: var(--color-zinc-200);
  --color-main-fg-sub: var(--color-zinc-400);
  --color-main-border: var(--color-brand);

  --font-body: Manrope, Noto Sans SC, sans-serif;
  --font-serif: Bitter, Noto Serif SC, serif;
  --font-mono: Iosevka, monospace;

  --spacing-content-width: 100ch;
  --spacing-main-screen: calc(100vh - 4 * var(--spacing-navbar));
  --spacing-navbar: 3.5rem;

  @keyframes bob {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(10px);
    }
  }
}

@property --bg-transition {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

@utility align-icon-offset {
  /* Determined empirically. TODO: Why do I need to do this...? */
  vertical-align: -3px;
}

@layer base {
  :root {
    /* Default light theme "Strawberry Milkshake" */
    /* TODO: `prefer-color-scheme` */
    [data-theme="strawberry-milkshake"] {
      --color-bg: var(--color-stone-300);
      --color-bg-sub: var(--color-stone-200);
      --color-main-bg: var(--color-stone-200);

      --color-fg: var(--color-stone-800);
      --color-main-fg: var(--color-stone-700);
      --color-main-fg-sub: var(--color-stone-500);
    }
  }

  *:hover, *:focus, *.is-active {
    --bg-transition: 1;
  }

  html {
    font-size: 18px;
  }

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

  a.animated, .prose a {
    /* adapted from https://stackoverflow.com/a/72459455 */
    @apply text-brand ease-out bg-no-repeat bg-right-bottom bg-linear-to-r
      from-transparent to-brand-dark to-0%;

    transition: 0.2s background-size;
    background-size: calc(var(--bg-transition) * 100%) 1.5px;
    text-decoration: none;

    &:hover, &:focus, &.is-active {
      @apply bg-left-bottom;
    }
  }

  .neon #theme-switcher .split-icon {
    --base-side: 0;
  }
  body.strawberry-milkshake #theme-switcher .split-icon {
    --base-side: 1;
  }

  blockquote {
    padding-left: 1em;
    border-left: 2px solid var(--color-brand);
  }
}

/*
  Redefine the meaning of `em` to mean "use brand color". 
  Only used on the splash screen and overall very niche.
*/
@utility em-brand {
  em {
    font-style: normal;
    color: var(--color-brand);
  }
}

@utility grid-cols-main-screen {
  grid-template-columns: 20rem auto 20rem;
}

@layer components {
  .prose {
    line-height: 2rem;
    max-width: 75ch;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    font-weight: 350;

    h1, h2, h3, h4, h5, h6 {
      margin-bottom: 0.5rem;
    }

    h1 {
      font-size: 1.75rem;
      font-weight: 750;
      margin-top: 2rem;
    }

    ol, ul {
      margin-inline-start: 2rem;
      list-style: outside;
      display: flex;
      flex-direction: column;
      gap: 1rem;

      li ul {
        margin-top: 1rem;
      }
    }

    b, strong {
      font-weight: 600;
    }

    code {
      padding-inline: 0.25rem;
      background: var(--color-bg);

      /* If we don't add this then breaking across e.g. command flags would look really strange */
      word-break: keep-all;
    }

    pre {
      background: var(--color-bg);
      padding: 0.5rem 1rem;
      overflow: scroll;

      /* Make Chromium/Webkit scrollbars look more like Firefox ones */
      scrollbar-width: thin;

      code {
        padding: 0;
      }
    }
  }
}