/* Inter is the licensed SF Pro stand-in. Apple devices use the system face. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root,
[data-theme="dark"] {
  --font-display: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: "SF Pro Text", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --copia-logo-icon-height: 2.4rem;
  --copia-logo-text-size: 2.046rem;
  --copia-logo-text-y: -0.1em;
  --copia-logo-gap: 0.48rem;
  --bg: #141413;
  --bg-alt: #1f1e1d;
  --input-bg: #30302e;
  --text: #faf9f5;
  --text-muted: rgba(250,249,245,0.5);
  --text-secondary: hsl(50 9% 73.7%);
  --accent: #faf9f5;
  --accent-muted: rgba(250,249,245,0.55);
  --glass: rgba(250,249,245,0.04);
  --glass-border: rgba(250,249,245,0.08);
  --border: rgba(250,249,245,0.08);
  --unselected: rgba(250,249,245,0.06);
  --selected: #1f1e1d;
}

[data-theme="light"] {
  --bg: #faf9f5;
  --bg-alt: #F0F0F0;
  --input-bg: #e8e8e8;
  --text: #141413;
  --text-muted: rgba(0,0,0,0.4);
  --text-secondary: hsl(60 2.5% 23.3%);
  --accent: #141413;
  --accent-muted: rgba(0,0,0,0.6);
  --glass: #f0eee6;
  --glass-border: rgba(0,0,0,0.07);
  --border: rgba(0,0,0,0.06);
  --unselected: #f0eee6;
  --selected: #ffffff;
}

/* Shared page foundation. Keep global browser normalization here so every
   page that uses the site theme also renders the shared navigation alike. */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  --nav-block-padding: 1rem;
  scroll-behavior: smooth;
  scroll-padding-top: calc(
    var(--copia-logo-icon-height) +
    var(--nav-block-padding) +
    var(--nav-block-padding)
  );
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}