/* ==========================================================================
   Base: fonts, design tokens, reset
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   These three files are expected in /fonts. They are not part of the project
   yet, so the browser currently falls back to the stacks in --font-display
   and --font-mono below. */
@font-face {
  font-family: "RulesDisplay";
  src: url("../fonts/RulesDisplay-Normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AeonikFono";
  src: url("../fonts/AeonikFono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AeonikFono";
  src: url("../fonts/AeonikFono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ---------------------------------------------------------------
   Light theme ("Paper & Cobalt") is the default; html.dark is "Prussian Abyss". */
:root {
  --navy: #020621;
  --paper: #f6f4ef;

  --frame: 5px;
  --backdrop: #00010a;

  --rail: var(--navy);
  --rail-fg: #ffffff;
  --rail-tag: #0b1340;

  --stage: #ffffff;
  --ink: #0000f2;
  --ink-body: rgba(0, 0, 242, 0.78);
  --brand: #0000f2;
  --hairline: rgba(0, 0, 242, 0.14);

  --panel-inverted: var(--navy);
  --panel-inverted-fg: #ffffff;

  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "RulesDisplay", Georgia, serif;
  --font-mono: "AeonikFono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html.dark {
  --backdrop: #000108;
  --rail-tag: #0d174a;

  --stage: var(--navy);
  --ink: #ffffff;
  --ink-body: rgba(255, 255, 255, 0.76);
  --brand: #ffffff;
  --hairline: rgba(255, 255, 255, 0.14);

  --panel-inverted: #07103a;
}

/* --- Reset ----------------------------------------------------------------
   Kept in a cascade layer so that every unlayered rule in the other
   stylesheets wins over it regardless of selector specificity. */
@layer base {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
    border: 0 solid #e5e7eb;
    margin: 0;
    padding: 0;
  }

  html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
  }

  h1,
  h2,
  h3 {
    font-size: inherit;
    font-weight: inherit;
  }

  /* Heading treatments the page has always had. */
  h1 {
    text-transform: uppercase;
  }

  h2 {
    letter-spacing: -0.05em;
  }

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

  strong {
    font-weight: bolder;
  }

  img,
  svg,
  canvas {
    display: block;
    vertical-align: middle;
  }

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

  button,
  input,
  textarea {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: transparent;
    border-radius: 0;
  }

  textarea {
    resize: vertical;
  }

  ::placeholder {
    opacity: 1;
    color: color-mix(in oklab, currentcolor 50%, transparent);
  }

  button {
    appearance: button;
  }
}

/* --- Document -------------------------------------------------------------
   The page is a fixed, non-scrolling three-column shell. */
html,
body {
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--backdrop);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
}

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