@layer reset;
/* Declared first so every Remix `rmx.*` component layer outranks these resets. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  --pt-paper: #FBF7F1;
  --pt-sheet: #FFFFFF;
  --pt-ink: #15233F;
  --pt-muted: #4A5675;
  --pt-accent: #A85208;
  --pt-brand: #F08A24;
  --pt-tile: #FFF3E2;
  --pt-line: #E8E1D5;
  --pt-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pt-paper: #0F1A30;
    --pt-sheet: #15233F;
    --pt-ink: #F5EFE6;
    --pt-muted: #B7C1D3;
    --pt-accent: #F08A24;
    --pt-brand: #F08A24;
    --pt-tile: #1E2D4C;
    --pt-line: #2A3A58;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --pt-paper: #0F1A30;
  --pt-sheet: #15233F;
  --pt-ink: #F5EFE6;
  --pt-muted: #B7C1D3;
  --pt-accent: #F08A24;
  --pt-brand: #F08A24;
  --pt-tile: #1E2D4C;
  --pt-line: #2A3A58;
  color-scheme: dark;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    background: var(--pt-paper);
    color: var(--pt-ink);
    font-family: var(--pt-font);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  img {
    max-width: 100%;
    height: auto;
  }

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