/*
 * The only file in the theme allowed to contain a literal.
 *
 * Three blocks: the faces, our own vocabulary, then GeneratePress's seven
 * variables aimed at ours. The parent emits its palette inline in the page, so
 * overriding its rules one at a time would mean winning a document-order race
 * that a parent update can silently reverse. Pointing its variables at ours
 * makes the parent's own rules produce our colours.
 *
 * Parent defaults, for reference: contrast #222222, contrast-2 #575760,
 * contrast-3 #b2b2be, base #f0f0f0, base-2 #f7f8f9, base-3 #ffffff,
 * accent #1e73be.
 */

/*
 * Self-hosted, latin only. Nothing on any page reaches a font CDN: a third
 * party would learn every visitor's address, and the page would depend on a
 * server we do not run. font-display:swap so text is readable while the file
 * is still arriving.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}

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

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

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

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/instrument-serif-400-italic.woff2') format('woff2');
}

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

:root {
  /*
   * White is the page and cream is a band across it — the reverse of the
   * first attempt, where everything was cream and therefore flat. Contrast
   * between sections is what gives a page depth without a single shadow.
   */
  --aii-page: #ffffff;
  --aii-band: #f6f4ef;
  --aii-paper: #ffffff;
  --aii-paper-raised: #ffffff;
  --aii-ink: #12100e;
  --aii-ink-soft: #6b645c;
  --aii-line: #e7e3da;
  --aii-accent-from: #e8833a;
  --aii-accent-to: #c2482d;
  --aii-accent-deep: #8f2f22;

  /* The light that travels across the primary button. */
  --aii-sheen: rgba(255, 255, 255, 0.38);

  /* Depth. Two steps only — more reads as a template. */
  /* A mask needs an opaque colour to keep and a transparent one to drop. It
     is not a palette colour, but it is a literal, and literals live here. */
  --aii-mask-keep: #000000;

  --aii-shadow-1: 0 1px 2px rgba(18, 16, 14, 0.04), 0 8px 24px rgba(18, 16, 14, 0.05);
  --aii-shadow-2: 0 2px 4px rgba(18, 16, 14, 0.05), 0 20px 60px rgba(18, 16, 14, 0.09);

  --aii-radius: 999px;
  --aii-radius-box: 20px;
  --aii-radius-panel: 28px;
  --aii-measure: 68ch;

  /* One scale. Every margin and padding in the theme is one of these. */
  --aii-space-1: 0.25rem;
  --aii-space-2: 0.5rem;
  --aii-space-3: 0.75rem;
  --aii-space-4: 1rem;
  --aii-space-6: 1.5rem;
  --aii-space-8: 2rem;
  --aii-space-12: 3rem;
  --aii-space-16: 4rem;
  --aii-space-24: 6rem;
  --aii-space-32: 8rem;

  /*
   * Two faces. Inter carries everything a visitor operates; the display face
   * carries the headlines and nothing else. Which display face is a setting,
   * so the choice can be seen on the real page rather than described.
   */
  --aii-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --aii-font-display: 'Instrument Serif', Georgia, serif;
  --aii-display-weight: 400;
  --aii-display-tracking: -0.015em;
  --aii-display-leading: 1.02;

  --aii-text-hero: clamp(2.5rem, 1.2rem + 5.2vw, 5.5rem);
  --aii-text-h2: clamp(1.9rem, 1.2rem + 2.4vw, 3.25rem);
  --aii-text-h3: 1.25rem;
  --aii-text-body: 1.0625rem;
  --aii-text-small: 0.9375rem;
  --aii-text-tiny: 0.8125rem;

  --aii-shell: 1240px;
}

/*
 * The poster alternative. A body class swaps it, so both can be seen on the
 * same live page instead of being argued about from a description.
 */
.aii-display-poster {
  --aii-font-display: 'Anton', 'Arial Narrow', sans-serif;
  --aii-display-weight: 400;
  --aii-display-tracking: -0.005em;
  --aii-display-leading: 0.94;
}

:root {
  --contrast: var(--aii-ink);
  --contrast-2: var(--aii-ink-soft);
  --contrast-3: var(--aii-line);
  --base: var(--aii-line);
  --base-2: var(--aii-band);
  --base-3: var(--aii-paper-raised);
  --accent: var(--aii-accent-to);
}