@layer reset, tokens, base;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
  ul, ol { padding: 0; }
  button, input, textarea, select { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  img { display: block; max-inline-size: 100%; }
}

@layer tokens {
  @font-face {
    font-family: "Gudea";
    src: url("../media/type/gudea-regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: "Gugi";
    src: url("../media/type/gugi-regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: "Balsamiq Sans";
    src: url("../media/type/balsamiq-sans-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
  }
  @font-face {
    font-family: "Gudea";
    src: url("../media/type/gudea-bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
  }
  :root {
    --ink: #252525;
    --paper: #e8e8c6;
    --paper-soft: #f4f3dc;
    --line: rgba(232, 232, 198, .46);
    --line-dark: rgba(37, 37, 37, .22);
    --surface: #30312c;
    --surface-raised: #3b3d35;
    --signal: #9fae83;
    --signal-dark: #526448;
    --danger: #efb1a5;
    --font-body: "Gudea", system-ui, sans-serif;
    --step--1: clamp(.9rem, .84rem + .15vw, 1.08rem);
    --step-0: clamp(1.05rem, .95rem + .2vw, 1.25rem);
    --step-1: clamp(1.3rem, 1.12rem + .55vw, 1.75rem);
    --step-2: clamp(1.8rem, 1.4rem + 1.25vw, 3rem);
    --step-3: clamp(2.7rem, 1.95rem + 2.65vw, 5rem);
    --space-1: .5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3.5rem;
    --space-6: 4rem;
    --space-7: 5rem;
    --space-8: 7rem;
    --radius-sm: .5rem;
    --radius-md: 1.5rem;
    --radius-pill: 99rem;
    --content: 1560px;
    --reading: 900px;
    --layout-gap: clamp(2rem, 4vw, 4rem);
    --shadow: 0 1.25rem 3rem rgba(0, 0, 0, .18);
  }
}

@layer base {
  body {
    min-inline-size: 320px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.35;
  }

  a { color: inherit; }
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
  button, a { cursor: pointer; }
  button { border: 0; }
  ::selection { background: var(--paper); color: var(--ink); }
}