@font-face {
  font-family: "RI Serif";
  src: url("assets/fonts/source-serif-4-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

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

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

:root {
  --ri-noir-950: #0b0b0a;
  --ri-noir-900: #11110f;
  --ri-noir-800: #1b1a18;
  --ri-noir-700: #2b2925;
  --ri-ivory-50: #f8f6f1;
  --ri-ivory-100: #eeeae2;
  --ri-ivory-200: #ded9cf;
  --ri-greige-300: #b8b1a5;
  --ri-greige-500: #756f66;
  --ri-greige-700: #4b4741;
  --ri-champagne-300: #c5b79e;
  --ri-champagne-500: #9a896f;
  --ri-champagne-700: #76654d;
  --ri-signal-blue: #2f6fce;
  --ri-status-sage: #9fa994;
  --ri-status-amber: #c99c4d;
  --ri-status-red: #cc675b;

  --ri-canvas-light: var(--ri-ivory-50);
  --ri-canvas-dark: var(--ri-noir-950);
  --ri-surface-light: #f1eee8;
  --ri-surface-dark: var(--ri-noir-800);
  --ri-text-on-light: #191816;
  --ri-text-muted-light: #68635c;
  --ri-text-on-dark: #f3efe7;
  --ri-text-muted-dark: #aaa398;
  --ri-border-light: #d4cfc5;
  --ri-border-dark: rgba(238, 234, 226, .16);
  --ri-accent: var(--ri-champagne-500);

  --ri-font-display: "RI Serif", "Source Serif 4", Charter, Georgia, serif;
  --ri-font-ui: "RI Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ri-font-mono: "SFMono-Regular", "SF Mono", Consolas, monospace;

  --ri-type-display-xl: clamp(4.5rem, 10vw, 9rem);
  --ri-type-display-lg: clamp(3.25rem, 7vw, 6.25rem);
  --ri-type-display-md: clamp(2.75rem, 5vw, 4.75rem);
  --ri-type-heading-lg: clamp(2rem, 3.4vw, 3.25rem);
  --ri-type-heading-md: clamp(1.5rem, 2.2vw, 2.125rem);
  --ri-type-heading-sm: 1.25rem;
  --ri-type-body-lg: 1.1875rem;
  --ri-type-body: 1rem;
  --ri-type-ui: .875rem;
  --ri-type-caption: .75rem;

  --ri-leading-tight: .94;
  --ri-leading-heading: 1.12;
  --ri-leading-body: 1.65;
  --ri-tracking-display: -.055em;
  --ri-tracking-label: .14em;

  --ri-space-1: .25rem;
  --ri-space-2: .5rem;
  --ri-space-3: .75rem;
  --ri-space-4: 1rem;
  --ri-space-5: 1.25rem;
  --ri-space-6: 1.5rem;
  --ri-space-8: 2rem;
  --ri-space-10: 2.5rem;
  --ri-space-12: 3rem;
  --ri-space-16: 4rem;
  --ri-space-20: 5rem;
  --ri-space-24: 6rem;

  --ri-radius-control: .5rem;
  --ri-radius-card: .875rem;
  --ri-radius-window: 1.125rem;
  --ri-radius-icon: 1rem;
  --ri-radius-pill: 999px;

  --ri-shadow-sm: 0 .5rem 1.5rem rgba(11, 11, 10, .10);
  --ri-shadow-md: 0 1.5rem 4rem rgba(11, 11, 10, .18);
  --ri-shadow-lg: 0 3rem 8rem rgba(11, 11, 10, .34);

  --ri-duration-fast: 160ms;
  --ri-duration-medium: 320ms;
  --ri-duration-slow: 500ms;
  --ri-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ri-ease-luxury: cubic-bezier(.22, 1, .36, 1);

  --ri-content-max: 90rem;
  --ri-reading-max: 43rem;
  --ri-touch-min: 2.75rem;
}

::selection {
  color: var(--ri-ivory-50);
  background: var(--ri-signal-blue);
}

:focus-visible {
  outline-color: var(--ri-signal-blue);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ri-duration-fast: 1ms;
    --ri-duration-medium: 1ms;
    --ri-duration-slow: 1ms;
  }
}