@layer base, tokens, layout, utilities;

@font-face {
  font-family: 'Mona Sans';
  src: url('https://github.com/github/mona-sans/raw/main/fonts/variable/MonaSans%5BwdthwghtslntSTAT%5D.woff2') format('woff2 supports variations'),
       url('https://github.com/github/mona-sans/raw/main/fonts/variable/MonaSans%5BwdthwghtslntSTAT%5D.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal oblique;
  font-display: swap;
}

@layer tokens {
  :root {
    --color-ivory: #F4EFE4;
    --color-ivory-mid: #EDE6D6;
    --color-ivory-deep: #E0D8C6;
    --color-graphite: #1E1E1E;
    --color-graphite-mid: #3A3A3A;
    --color-graphite-soft: #5C5C5C;
    --color-cobalt: #2E4D96;
    --color-cobalt-light: #4F6DBF;
    --color-cobalt-pale: #D6DFF5;
    --color-copper: #B86832;
    --color-copper-light: #D4854F;
    --color-copper-pale: #F5E0D0;
    --color-fog: #C8CDD8;
    --color-fog-light: #E2E5ED;
    --color-white: #FFFFFF;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 3px rgba(30,30,30,0.08), 0 1px 2px rgba(30,30,30,0.04);
    --shadow-md: 0 4px 12px rgba(30,30,30,0.1), 0 2px 4px rgba(30,30,30,0.06);
    --shadow-lg: 0 12px 32px rgba(30,30,30,0.12), 0 4px 8px rgba(30,30,30,0.08);

    --border-thin: 1px solid var(--color-fog);
    --border-mid: 1.5px solid var(--color-fog);
    --border-cobalt: 1.5px solid var(--color-cobalt-pale);

    --type-xs: clamp(0.7rem, 0.68rem + 0.1vw, 0.75rem);
    --type-sm: clamp(0.8rem, 0.78rem + 0.12vw, 0.875rem);
    --type-base: clamp(0.9rem, 0.88rem + 0.2vw, 1rem);
    --type-md: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --type-lg: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
    --type-xl: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
    --type-2xl: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
    --type-3xl: clamp(2rem, 1.4rem + 3vw, 3.5rem);
    --type-4xl: clamp(2.4rem, 1.6rem + 4vw, 4.5rem);

    --font-sans: 'Mona Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --nav-height: 64px;
    --container-max: 1320px;
    --container-pad: clamp(1rem, 4vw, 2.5rem);
  }
}

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

  html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--type-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-graphite);
    background-color: var(--color-ivory);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img, picture, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
  }

  a {
    color: var(--color-cobalt);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color 0.2s ease, opacity 0.2s ease;
  }

  a:hover { color: var(--color-copper); }
  a:focus-visible {
    outline: 2px solid var(--color-cobalt);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-graphite);
    text-wrap: balance;
  }

  h1 { font-size: var(--type-4xl); font-weight: 800; }
  h2 { font-size: var(--type-3xl); font-weight: 700; }
  h3 { font-size: var(--type-2xl); }
  h4 { font-size: var(--type-xl); }
  h5 { font-size: var(--type-lg); }
  h6 { font-size: var(--type-md); }

  p { max-width: 72ch; }
  p + p { margin-block-start: var(--space-4); }

  ul, ol { padding-inline-start: 1.4em; }
  li { margin-block: var(--space-2); }

  strong { font-weight: 700; }
  em { font-style: italic; }

  hr {
    border: none;
    border-block-start: var(--border-thin);
    margin-block: var(--space-8);
  }

  button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
  }

  input, textarea, select {
    font-family: inherit;
    font-size: inherit;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    text-align: start;
    padding: var(--space-3) var(--space-4);
    border-block-end: var(--border-thin);
  }

  th {
    font-weight: 600;
    font-size: var(--type-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-graphite-soft);
  }

  details summary { cursor: pointer; }

  :focus-visible {
    outline: 2px solid var(--color-cobalt);
    outline-offset: 3px;
  }
}

@layer layout {
  .skip-link {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--space-4);
    z-index: 9999;
    background: var(--color-cobalt);
    color: var(--color-white);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    transition: inset-block-start 0.2s;
  }

  .skip-link:focus {
    inset-block-start: var(--space-4);
  }

  .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    width: 100%;
  }

  .section {
    padding-block: clamp(3rem, 8vw, 6rem);
  }

  .section--tight {
    padding-block: clamp(2rem, 5vw, 3.5rem);
  }

  .section--wide {
    padding-block: clamp(4rem, 10vw, 8rem);
  }

  .grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: var(--space-8);
  }

  .grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--space-6);
  }

  .grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-6);
  }

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

  .flex-between {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
  }

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

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  .text-center { text-align: center; }
  .text-start { text-align: start; }
  .text-end { text-align: end; }

  .font-bold { font-weight: 700; }
  .font-extrabold { font-weight: 800; }
  .font-medium { font-weight: 500; }

  .color-cobalt { color: var(--color-cobalt); }
  .color-copper { color: var(--color-copper); }
  .color-graphite-soft { color: var(--color-graphite-soft); }
  .color-white { color: var(--color-white); }

  .bg-ivory { background-color: var(--color-ivory); }
  .bg-ivory-mid { background-color: var(--color-ivory-mid); }
  .bg-graphite { background-color: var(--color-graphite); }
  .bg-cobalt { background-color: var(--color-cobalt); }
  .bg-cobalt-pale { background-color: var(--color-cobalt-pale); }
  .bg-copper-pale { background-color: var(--color-copper-pale); }
  .bg-white { background-color: var(--color-white); }
  .bg-fog-light { background-color: var(--color-fog-light); }

  .label-tag {
    display: inline-block;
    font-size: var(--type-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    border: 1.5px solid currentColor;
  }

  .label-tag--cobalt {
    color: var(--color-cobalt);
    border-color: var(--color-cobalt-pale);
    background: var(--color-cobalt-pale);
  }

  .label-tag--copper {
    color: var(--color-copper);
    border-color: var(--color-copper-pale);
    background: var(--color-copper-pale);
  }

  .label-tag--graphite {
    color: var(--color-white);
    border-color: var(--color-graphite);
    background: var(--color-graphite);
  }

  .divider {
    width: 3rem;
    height: 3px;
    background: var(--color-copper);
    border-radius: var(--radius-full);
    margin-block: var(--space-4);
  }

  .divider--cobalt { background: var(--color-cobalt); }

  .mt-4 { margin-block-start: var(--space-4); }
  .mt-6 { margin-block-start: var(--space-6); }
  .mt-8 { margin-block-start: var(--space-8); }
  .mt-12 { margin-block-start: var(--space-12); }
  .mt-16 { margin-block-start: var(--space-16); }

  .mb-4 { margin-block-end: var(--space-4); }
  .mb-6 { margin-block-end: var(--space-6); }
  .mb-8 { margin-block-end: var(--space-8); }
  .mb-12 { margin-block-end: var(--space-12); }

  .gap-2 { gap: var(--space-2); }
  .gap-4 { gap: var(--space-4); }
  .gap-6 { gap: var(--space-6); }
  .gap-8 { gap: var(--space-8); }
}