/* Atelier Noir — design tokens.
   Layer order for the whole site is declared here, so every other file can
   be loaded in any order without changing the cascade. */

@layer tokens, base, layout, components, pages, app, motion;

@layer tokens {
  @font-face {
    font-family: "Instrument Serif";
    src: url("/assets/fonts/instrument-serif.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Instrument Serif";
    src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: "Inter";
    src: url("/assets/fonts/inter.woff2") format("woff2");
    font-weight: 300 600;
    font-style: normal;
    font-display: swap;
  }

  :root {
    /* Stone and light */
    --ink-0: #0d0d0c;
    --ink-1: #161614;
    --ink-2: #1f1e1b;
    --line: #2c2b28;
    --bone: #ebe6de;
    --mute: #a39e94;
    --paper: #e7e1d6;
    --paper-ink: #1a1917;
    --paper-mute: #5a564e;
    --paper-line: #c9c1b3;
    --light: #f4ecdc;

    /* Type */
    --serif: "Instrument Serif", "Times New Roman", serif;
    --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

    --fs-hero: clamp(4.75rem, min(15.5vw, 26svh), 16rem);
    --fs-mega: clamp(3.25rem, min(9.5vw, 19svh), 10rem);
    --fs-h1: clamp(3.25rem, 8vw, 8.5rem);
    --fs-h2: clamp(2.5rem, 5.4vw, 5.5rem);
    --fs-statement: clamp(1.875rem, 4.1vw, 4.25rem);
    --fs-h3: clamp(1.75rem, 2.7vw, 2.75rem);
    --fs-lead: clamp(1.375rem, 2vw, 2rem);
    --fs-body: clamp(1rem, 0.96rem + 0.12vw, 1.0625rem);
    --fs-small: 0.875rem;
    --fs-label: 0.75rem;

    /* The blade: one angle for every diagonal on the site. */
    --blade-angle: 22deg;
    --blade-tan: 0.404;

    /* Grid */
    --cols: 4;
    --gutter: 1rem;
    --margin: 1.25rem;
    --max: 112rem;
    --header-h: 64px;

    /* Rhythm */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --space-6: 6rem;
    --space-7: 9rem;
    --section: 7rem;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  }

  @media (min-width: 600px) {
    :root {
      --cols: 8;
      --gutter: 1.25rem;
      --margin: 2rem;
    }
  }

  @media (min-width: 900px) {
    :root {
      --cols: 12;
      --gutter: 1.5rem;
      --margin: 2.5rem;
      --header-h: 76px;
      --section: 10rem;
    }
  }

  @media (min-width: 1400px) {
    :root {
      --gutter: 2rem;
      --margin: 4rem;
      --section: 13rem;
    }
  }
}