@layer reset, tokens, base, layout, components, utilities, states;

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Italic-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    tab-size: 4;
    color-scheme: dark;
  }

  :where(body) {
    line-height: 1.5;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
    font-weight: inherit;
    text-wrap: balance;
  }

  :where(p, li, figcaption) {
    text-wrap: pretty;
  }

  :where(ul, ol) {
    padding-inline-start: var(--space-5);
  }

  :where(ul[role="list"], ol[role="list"]) {
    list-style: none;
    padding: 0;
  }

  :where(a) {
    text-decoration-skip-ink: auto;
    text-underline-offset: 0.2em;
  }

  :where(sub, sup) {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  :where(sub) {
    bottom: -0.25em;
  }

  :where(sup) {
    top: -0.5em;
  }

  :where(abbr[title]) {
    text-decoration: underline dotted;
    cursor: help;
  }

  :where(code, kbd, samp, pre) {
    font-family: inherit;
    font-size: 1em;
  }

  :where(pre) {
    overflow-x: auto;
  }

  :where(hr) {
    height: 0;
    border: 0;
    border-block-start: 1px solid currentcolor;
    color: inherit;
    overflow: visible;
  }

  :where(img, picture, video, canvas, svg, iframe, embed, object) {
    display: block;
    max-inline-size: 100%;
  }

  :where(img, video, canvas, svg) {
    block-size: auto;
  }

  :where(iframe) {
    border: 0;
  }

  :where(button, input, select, textarea, optgroup) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
  }

  :where(button, select) {
    text-transform: none;
  }

  :where(button, [type="button"], [type="submit"], [type="reset"]) {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    touch-action: manipulation;
  }

  :where(input, select, textarea) {
    min-width: 0;
  }

  :where(textarea) {
    resize: vertical;
  }

  :where(textarea:not([rows])) {
    min-block-size: 10em;
  }

  :where(fieldset) {
    min-width: 0;
    padding: 0;
    border: 0;
  }

  :where(legend) {
    padding: 0;
  }

  :where([type="search"]) {
    appearance: none;
  }

  :where([type="search"])::-webkit-search-decoration,
  :where([type="search"])::-webkit-search-cancel-button {
    appearance: none;
  }

  :where([type="number"])::-webkit-inner-spin-button,
  :where([type="number"])::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }

  ::placeholder {
    color: color-mix(in oklab, currentcolor 55%, transparent);
    opacity: 1;
  }

  ::file-selector-button {
    font: inherit;
  }

  [hidden]:not([hidden="until-found"]) {
    display: none !important;
  }

  :where(summary) {
    cursor: pointer;
  }

  :where(:focus-visible) {
    outline: 2px solid currentcolor;
    outline-offset: 2px;
  }

  :where(:target) {
    scroll-margin-block-start: var(--space-6);
  }

  :where(dialog) {
    margin: auto;
    padding: 0;
    border: 0;
    color: inherit;
    background: none;
    max-width: min(90vw, 60ch);
    max-height: 90dvh;
  }

  dialog::backdrop {
    background: rgb(0 0 0 / 60%);
  }

  :where(table) {
    border-collapse: collapse;
    border-spacing: 0;
    text-indent: 0;
  }

  :where(caption) {
    text-align: start;
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (interpolate-size: allow-keywords) {
      :root {
        interpolate-size: allow-keywords;
      }
    }
  }
}

@layer tokens {
  :root {
    --font-page:
      "JetBrainsMono Nerd Font", "JetBrainsMono Nerd Font Mono",
      "JetBrainsMono NF", "JetBrains Mono", ui-monospace, "SF Mono", Menlo,
      Consolas, monospace;

    --font-size-1: 1.2rem;
    --font-size-2: 1.4rem;
    --font-size-3: 1.6rem;
    --font-size-4: 1.8rem;
    --font-size-5: 2.4rem;
    --font-size-6: 3.2rem;
    --font-size-7: 4rem;
    --font-size-8: 4.8rem;

    --font-size-page: var(--font-size-4);
    --line-height-page: calc(28 / 18);
    --line-height-tight: 1.2;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    --color-gray-25: #f3f3f3;
    --color-gray-50: #acacad;
    --color-gray-400: #343437;
    --color-gray-800: #202024;
    --color-gray-900: #18181c;
    --color-gray-950: #101014;
    --color-gold: #95824d;

    --color-bg: var(--color-gray-900);
    --color-surface: var(--color-gray-950);
    --color-text-selected: var(--color-gray-25);
    --color-text-not-selected: var(--color-gray-50);
    --color-accent: var(--color-gold);
    --color-focus: var(--color-accent);

    --color-page-bg: var(--color-bg);
    --color-header-bg: var(--color-surface);
    --color-footer-bg: var(--color-surface);

    --size-header: 10rem;
    --size-footer: 30rem;
    --size-content: 120rem;
    --size-prose: 65ch;

    --space-1: 0.4rem;
    --space-2: 0.8rem;
    --space-3: 1.2rem;
    --space-4: 1.6rem;
    --space-5: 2.4rem;
    --space-6: 3.2rem;
    --space-7: 4.8rem;
    --space-8: 6.4rem;

    --radius-1: 0.4rem;
    --radius-2: 0.8rem;
    --radius-3: 1.6rem;

    --duration-1: 150ms;
    --duration-2: 300ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    --z-top: 100;
  }
}

@layer base {
  html {
    background-color: var(--color-page-bg);
  }

  body {
    font-family: var(--font-page);
    font-size: var(--font-size-page);
    line-height: var(--line-height-page);
    color: var(--color-text);
    background-color: var(--color-page-bg);
  }

  :where(h1, h2, h3, h4) {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
  }

  :where(h1) {
    font-size: var(--font-size-8);
  }

  :where(h2) {
    font-size: var(--font-size-6);
  }

  :where(h3) {
    font-size: var(--font-size-5);
  }

  :where(h4) {
    font-size: var(--font-size-4);
  }

  :where(a) {
    color: var(--color-accent);
  }

  :where(hr) {
    color: var(--color-border);
  }

  :where(:focus-visible) {
    outline-color: var(--color-focus);
  }

  ::selection {
    background-color: color-mix(in oklab, var(--color-accent) 35%, transparent);
  }
}

@layer layout {
  body {
    display: grid;

    grid-template:
      "header" auto
      "main" 1fr
      "footer" auto
      / 1fr;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    overflow-x: clip;
  }

  header,
  main,
  footer {
    padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  }

  header {
    grid-area: header;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: calc(var(--size-header) + env(safe-area-inset-top));
    padding-block-start: env(safe-area-inset-top);
  }

  main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-6);
    padding-inline: calc(env(safe-area-inset-left) + var(--space-4))
      calc(env(safe-area-inset-right) + var(--space-4));
  }

  footer {
    grid-area: footer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-block-size: calc(var(--size-footer) + env(safe-area-inset-bottom));
    padding-block-end: env(safe-area-inset-bottom);
  }
}

@layer components {
  header {
    background-color: var(--color-header-bg);
  }

  footer {
    background-color: var(--color-footer-bg);
  }

  .skip-link {
    position: absolute;
    inset-block-start: calc(env(safe-area-inset-top) + var(--space-2));
    inset-inline-start: calc(env(safe-area-inset-left) + var(--space-2));
    z-index: var(--z-top);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-1);
    color: var(--color-bg);
    background-color: var(--color-accent);
    text-decoration: none;
  }

  .skip-link:not(:focus) {
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@layer utilities {
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .stack--tight {
    gap: var(--space-2);
  }

  .stack--loose {
    gap: var(--space-6);
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .container {
    inline-size: 100%;
    max-inline-size: var(--size-content);
    margin-inline: auto;
  }

  .prose {
    max-inline-size: var(--size-prose);
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@layer states {
  @media (forced-colors: active) {
    :where(:focus-visible) {
      outline-color: CanvasText;
    }
  }

  @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;
    }
  }
}