/* Cascade order */
@layer reset, global, default, layout, theme, components;

@layer reset {
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Control font-size inflation */
  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    height: 100%;
  }

  /* Remove all default margin and padding */
  * {
    margin: 0;
    padding: 0;
  }

  /* Body defaults */
  body {
    position: relative;
    min-height: 100svh;
  }

  /* Heading defaults */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
  }

  /* Reset button styles */
  button {
    border: 0;
    background-color: transparent;
  }

  /* Make block elements easier to work with */
  img,
  svg,
  picture,
  video,
  canvas,
  embed,
  svg {
    display: block;
    width: 100%;
  }

  svg {
    height: 100%;
  }

  /* Inherit fonts for form controls */
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  /* Blanket motion sickness prevention */
  @media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer global {

  /* Fonts */
  @font-face {
    font-family: "InterVariable";
    font-display: swap;
    font-style: normal;
    font-weight: 100 900;
    src: url("/fonts/InterVariable.woff2") format("woff2");
  }

  @font-face {
    font-family: "InterVariable";
    font-display: swap;
    font-style: italic;
    font-weight: 100 900;
    src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
  }

  @font-face {
    font-family: "SourceHansSansSC";
    font-display: swap;
    font-stretch: normal;
    font-weight: 100 700;
    src: url("/fonts/SourceHansSansSC.woff2") format("woff2");
  }

  @font-face {
    font-family: "SourceHansSansJA";
    font-display: swap;
    font-stretch: normal;
    font-weight: 100 700;
    src: url("/fonts/SourceHansSansJA.woff2") format("woff2");
  }

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

  @font-face {
    font-family: "IosevkaCustom";
    font-display: swap;
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/IosevkaCustom-Regular.woff2") format("woff2");
  }

  @font-face {
    font-family: "IosevkaCustom";
    font-display: swap;
    font-stretch: normal;
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/IosevkaCustom-Bold.woff2") format("woff2");
  }

  @font-face {
    font-family: "IosevkaCustom";
    font-display: swap;
    font-stretch: normal;
    font-style: oblique;
    font-weight: 400;
    src: url("/fonts/IosevkaCustom-Oblique.woff2") format("woff2");
  }

  @font-face {
    font-family: "IosevkaCustom";
    font-display: swap;
    font-stretch: normal;
    font-style: oblique;
    font-weight: 700;
    src: url("/fonts/IosevkaCustom-BoldOblique.woff2") format("woff2");
  }

  *:lang(ja) {
    font-family: "InterVariable", "SourceHansSansJA";
  }

  *:lang(zh) {
    font-family: "InterVariable", "SourceHansSansSC";
  }

  :root {
    font-family: "InterVariable";

    --t-white: rgb(251 249 255);
    --t-black: rgb(12 12 14);

    --t-gray-1: rgb(217 215 221);
    --t-gray-2: rgb(184 183 187);
    --t-gray-3: rgb(152 151 155);
    --t-gray-4: rgb(121 120 124);
    --t-gray-5: rgb(92 91 94);
    --t-gray-6: rgb(64 64 66);
    --t-gray-7: rgb(51 51 54);
    --t-gray-8: rgb(38 39 43);

    --t-red-1: rgb(255 204 207);
    --t-red-2: rgb(255 167 170);
    --t-red-3: rgb(255 152 158);
    --t-red-4: rgb(238 124 140);
    --t-red-5: rgb(220 96 123);
    --t-red-6: rgb(186 77 104);
    --t-red-7: rgb(153 67 86);
    --t-red-8: rgb(123 54 69);

    --t-orange-1: rgb(255 213 188);
    --t-orange-2: rgb(255 192 159);
    --t-orange-3: rgb(255 171 130);
    --t-orange-4: rgb(236 147 111);
    --t-orange-5: rgb(216 123 93);
    --t-orange-6: rgb(178 100 79);
    --t-orange-7: rgb(142 77 66);
    --t-orange-8: rgb(114 62 53);

    --t-yellow-1: rgb(252 228 197);
    --t-yellow-2: rgb(249 212 163);
    --t-yellow-3: rgb(244 197 130);
    --t-yellow-4: rgb(223 170 100);
    --t-yellow-5: rgb(202 144 70);
    --t-yellow-6: rgb(162 115 56);
    --t-yellow-7: rgb(124 88 43);
    --t-yellow-8: rgb(99 71 34);

    --t-green-1: rgb(221 245 206);
    --t-green-2: rgb(193 216 179);
    --t-green-3: rgb(176 198 162);
    --t-green-4: rgb(157 179 144);
    --t-green-5: rgb(139 160 126);
    --t-green-6: rgb(113 133 101);
    --t-green-7: rgb(89 107 77);
    --t-green-8: rgb(65 82 54);

    --t-cyan-1: rgb(195 242 247);
    --t-cyan-2: rgb(169 222 227);
    --t-cyan-3: rgb(144 202 208);
    --t-cyan-4: rgb(117 184 188);
    --t-cyan-5: rgb(88 166 169);
    --t-cyan-6: rgb(73 133 138);
    --t-cyan-7: rgb(58 102 109);
    --t-cyan-8: rgb(48 81 87);

    --t-blue-1: rgb(211 234 255);
    --t-blue-2: rgb(180 213 255);
    --t-blue-3: rgb(147 193 254);
    --t-blue-4: rgb(122 173 233);
    --t-blue-5: rgb(96 153 213);
    --t-blue-6: rgb(78 125 174);
    --t-blue-7: rgb(61 98 136);
    --t-blue-8: rgb(49 78 109);

    --t-purple-1: rgb(241 224 255);
    --t-purple-2: rgb(224 198 248);
    --t-purple-3: rgb(207 173 240);
    --t-purple-4: rgb(182 152 226);
    --t-purple-5: rgb(158 132 213);
    --t-purple-6: rgb(130 109 175);
    --t-purple-7: rgb(103 86 139);
    --t-purple-8: rgb(83 69 112);

    --t-magenta-1: rgb(250 221 250);
    --t-magenta-2: rgb(237 194 230);
    --t-magenta-3: rgb(224 167 224);
    --t-magenta-4: rgb(201 143 196);
    --t-magenta-5: rgb(179 120 168);
    --t-magenta-6: rgb(150 99 140);
    --t-magenta-7: rgb(124 82 116);
    --t-magenta-8: rgb(99 65 93);

    /* Text sizes */
    --step--3: 0.62em;
    --step--2: 0.81em;
    --step--1: 0.87em;
    --step-0: 1.00em;
    --step-1: 1.35em;
    --step-2: 1.62em;
    --step-3: 1.94em;
    --step-4: 2.33em;
    --step-5: 2.79em;
    --step-6: 3.35em;
    --step-7: 4.03em;
    --step-8: 4.83em;

    /* Spacing sizes */
    --space-3xs: 0.25rem;
    --space-2xs: 0.50rem;
    --space-xs: 0.80rem;
    --space-s: 1.00rem;
    --space-m: 1.50rem;
    --space-l: 2.10rem;
    --space-xl: 3.20rem;
    --space-2xl: 4.00rem;

    /* Color scheme */
    color-scheme: light dark;
    --theme-light: initial;
    --theme-dark: ;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --theme-dark: initial;
      --theme-light: ;
    }
  }

  :root[data-theme="light"] {
    color-scheme: light;
    --theme-light: initial;
    --theme-dark: ;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --theme-dark: initial;
    --theme-light: ;
  }

  /* Semantic theme */
  :root {
    --theme-light-red: var(--t-red-3);
    --theme-light-orange: var(--t-orange-3);
    --theme-light-yellow: var(--t-yellow-3);
    --theme-light-green: var(--t-green-3);
    --theme-light-cyan: var(--t-cyan-3);
    --theme-light-blue: var(--t-blue-3);
    --theme-light-purple: var(--t-purple-3);
    --theme-light-magenta: var(--t-magenta-3);

    --theme-dark-red: var(--t-red-7);
    --theme-dark-orange: var(--t-orange-7);
    --theme-dark-yellow: var(--t-yellow-7);
    --theme-dark-green: var(--t-green-7);
    --theme-dark-cyan: var(--t-cyan-7);
    --theme-dark-blue: var(--t-blue-7);
    --theme-dark-purple: var(--t-purple-7);
    --theme-dark-magenta: var(--t-magenta-7);

    --theme-red: var(--theme-light, var(--theme-dark-red)) var(--theme-dark, var(--theme-light-red));
    --theme-orange: var(--theme-light, var(--theme-dark-orange)) var(--theme-dark, var(--theme-light-orange));
    --theme-yellow: var(--theme-light, var(--theme-dark-yellow)) var(--theme-dark, var(--theme-light-yellow));
    --theme-green: var(--theme-light, var(--theme-dark-green)) var(--theme-dark, var(--theme-light-green));
    --theme-cyan: var(--theme-light, var(--theme-dark-cyan)) var(--theme-dark, var(--theme-light-cyan));
    --theme-blue: var(--theme-light, var(--theme-dark-blue)) var(--theme-dark, var(--theme-light-blue));
    --theme-purple: var(--theme-light, var(--theme-dark-purple)) var(--theme-dark, var(--theme-light-purple));
    --theme-magenta: var(--theme-light, var(--theme-dark-magenta)) var(--theme-dark, var(--theme-light-magenta));

    --theme-background: var(--theme-light, var(--t-white)) var(--theme-dark, var(--t-gray-8));
    --theme-background-alt: var(--theme-light,
        oklch(from var(--theme-background) calc(l - 0.01) c h)) var(--theme-dark,
        oklch(from var(--theme-background) calc(l + 0.01) c h));
    --theme-foreground: var(--theme-light, var(--t-black)) var(--theme-dark, var(--t-gray-1));
    --theme-foreground-alt: var(--theme-light, var(--t-gray-6)) var(--theme-dark, var(--t-gray-2));
    --theme-link: var(--theme-blue);
    --theme-link-visited: var(--theme-magenta);
    --theme-focus: var(--theme-red);
    --theme-hover: var(--theme-green);
    --theme-accent: var(--theme-light, var(--t-yellow-3)) var(--theme-dark, var(--theme-light-blue));
  }
}

@layer default {
  /* Smooth scrolling */
  html:focus-within {
    scroll-behavior: smooth;
  }

  /* Default keyboard focus style */
  * {
    &:focus {
      outline-color: transparent;
    }

    &:focus-visible {
      outline: var(--theme-focus) solid 2px;
    }
  }

  /* Inline styles */
  :root {
    font-size: var(--step-0);
    line-height: 1.6;
  }

  p {
    hyphens: auto;
  }

  abbr,
  code {
    hyphens: manual;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "BricolageGrotesque";
    font-weight: 600;
  }

  h1 {
    font-size: var(--step-3);
    line-height: 1.2;
  }

  h2 {
    font-size: var(--step-2);
    line-height: 1.25;
  }

  h3 {
    font-size: var(--step-1);
    line-height: 1.5;
  }

  pre,
  code {
    font-family: "IosevkaCustom";
    /* font-size: var(--step--1); */
    /* line-height: 1.3; */
  }

  /* Default link style */
  a[class] {
    color: unset;
    text-decoration-line: none;
  }

  a:not([class]) {
    color: var(--theme-link);

    &:visited {
      color: var(--theme-link-visited);
    }
  }

  a:not(:is(:hover, :focus, [class])) {
    text-decoration-color: color-mix(in srgb, currentColor, transparent 80%);
  }

  :is(h1, h2, h3, h4, h5, h6) a:not([class]) {
    color: unset;
    text-decoration-line: none;

    &:visited {
      color: inherit;
    }

    &:hover {
      color: var(--theme-link);
      text-decoration-line: underline;
    }
  }

  sub, sup {
    font-size: inherit;
    font-weight: 350;
    vertical-align: baseline;
    line-height: 0;
    position: relative;
  }

  sub {
    font-variant-position: sub;
  }

  sup {
    font-variant-position: super;
  }

  mark {
    background-image: linear-gradient(to bottom right,
        var(--theme-light, var(--t-yellow-2)) var(--theme-dark, var(--t-yellow-3)),
        var(--theme-light, var(--t-magenta-2)) var(--theme-dark, var(--t-magenta-3)));
  }

  /* Block styles */
  html {
    scroll-padding-top: 2rem;
    accent-color: var(--theme-blue);
  }

  body {
    color: var(--theme-foreground);
    background-color: var(--theme-background);
    overflow-x: hidden;
  }

  main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  ::selection {
    color: var(--theme-background);
    background-color: var(--theme-foreground);
  }

  input,
  textarea,
  select {
    color: var(--theme-foreground);
    background-color: var(--theme-background-alt);
    border: 1px solid color-mix(in srgb, var(--theme-border), transparent 50%);
  }

  button:hover {
    cursor: pointer;
  }

  /* Blockquote style */
  figure:has(blockquote) {
    margin-inline-start: var(--space-s);

    & blockquote > p:first-child::before {
      content: "“ ";
      margin-inline-start: -1.1ch;
      line-height: 0;
      font-size: var(--step-2);
    }

    font-style: italic;

    & figcaption {
      &:before {
        content: "—";
        margin-inline-end: 0.5ch;
      }

      font-size: var(--step--1);
      text-align: right;
    }
  }

  /* Preformatted block */
  pre {
    position: relative;
    display: grid;
    background-color: var(--theme-background-alt);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    width: 100%;
    overflow-x: auto;
    border-radius: 0.25rem;
  }

  /* Code block */
  pre > code {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    box-shadow: none;
    padding: var(--space-s);
    overflow-x: auto;

    & > span {
      height: 0.90rlh;
    }
  }
}

@layer components {
  /* Navbar */
  .navbar {
    width: 100%;
    height: 6rem;
    color: var(--t-gray-1);
    background-image: linear-gradient(to bottom, oklch(from var(--t-gray-8) calc(l - 0.04) c h), var(--t-gray-8));

    /* The navbar is always in dark mode */
    --theme-focus: var(--theme-light-red);
    --theme-hover: var(--theme-light-green);

    & .navbar-items {
      height: 100%;
      max-width: 1100px;
      margin: auto;

      display: flex;
      justify-content: space-between;
      align-items: center;

      padding-left: var(--space-xs);
      padding-right: var(--space-xs);
    }

    & .logo {
      height: 4rem;
      width: 4rem;
      border-radius: 100%;
      padding: 0.5rem;
      margin: 0.5rem;
      vertical-align: middle;
    }

    /* Hover and focus styles */
    & #page-top:focus-visible {
      /* We set the outline on the logo instead */
      outline-color: transparent;
    }

    & #page-top:focus-visible .logo {
      box-shadow: 0 0 0 2px var(--theme-focus);
    }

    & #page-top:hover .logo {
      box-shadow: 0 0 0 2px var(--theme-hover);
    }

    /* Stuff on the right of the navbar */
    & .nav {
      display: flex;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    & .nav>*+* {
      margin-left: 1rem;
    }

  }

  /* Search icon */
  .navbar .search {
    width: 32px;
    height: 32px;

    & svg {
      margin-top: 3px;
      width: 27px;
      height: 27px;
    }

    &:focus-visible {
      outline-color: transparent;
    }

    &:focus-visible svg {
      color: var(--theme-focus);
    }

    &:hover svg {
      color: var(--theme-hover);
    }
  }

  /* Theme toggle */
  .navbar .tool-duck {
    display: inline-flex;
  }

  .navbar #tool-duck {
    &:focus-visible {
      outline-color: transparent;
      color: var(--theme-focus);
    }

    &:hover .svg-ring {
      color: var(--theme-hover);
    }
  }


  /* Theme toggle */
  .navbar .theme-toggle {
    display: inline-flex;
    align-items: center;
  }

  .navbar #theme-toggle {
    position: relative;

    height: 32px;
    width: 32px;

    border-width: 0;
    background-color: transparent;

    &:focus-visible {
      outline-color: transparent;
    }

    &:focus-visible .svg-ring {
      color: var(--theme-focus);
    }

    &:hover .svg-ring {
      color: var(--theme-hover);
    }
  }

  .navbar #theme-toggle>svg>g {
    transform-box: fill-box;
    transform-origin: center;

    transition-property: transform;
    transition-duration: 200ms;

    opacity: 0;
    transform: rotate(-180deg);
  }

  :root[data-theme="dark"] .navbar #theme-toggle g.dark {
    opacity: 1;
    transform: rotate(0deg);
  }

  :root[data-theme="auto"] .navbar #theme-toggle g.auto {
    opacity: 1;
    transform: rotate(0deg);
  }

  :root[data-theme="light"] .navbar #theme-toggle g.light {
    opacity: 1;
    transform: rotate(0deg);
  }

  /* Boxy button */
  .boxy-btn {
    color: inherit;
    text-decoration-line: none;

    &:active>.content {
      transform: translate(2px, 2px);
    }

    &:active>.content::after {
      transform: translate(-2px, -2px);
    }

    --border-color: var(--theme-foreground);

    &:focus-visible {
      --border-color: var(--theme-focus);
      outline-color: transparent;
    }

    &:hover {
      --border-color: var(--theme-hover);
    }
  }

  .boxy-btn>.content {
    display: inline-block;
    font-size: var(--step--1);
    font-weight: bold;
    border: 2px solid var(--border-color);
    border-radius: 3px;

    padding: 2px 4px 0px 4px;
    background: var(--theme-background);

    position: relative;
    top: -1px;
    left: -1px;
    margin-inline-end: var(--space-2xs);
    z-index: 1;

    transition: transform .1s;
  }

  .boxy-btn .content::before {
    content: "";
    background: var(--theme-background);
    border: 2px solid var(--border-color);
    border-radius: 3px;

    position: absolute;
    top: -2px;
    left: -2px;
    height: calc(100% + 6px);
    width: calc(100% + 6px);
    z-index: -1;
  }

  .boxy-btn .content::after {
    content: "";
    background: color-mix(in srgb, black 30%, var(--border-color) 70%);
    border: 2px solid color-mix(in srgb, black 30%, var(--border-color) 70%);
    border-radius: 3px;

    position: absolute;
    top: 1px;
    left: 1px;
    right: 0;
    height: calc(100% + 6px);
    width: calc(100% + 6px);

    z-index: -2;

    transition: transform .1s;
  }

  .no-js .when-js {
    display: none !important;
  }

  .js .when-no-js {
    display: none !important;
  }
}