/*
 * Plicine, the built-in theme. Paper, ink and one green: a cream page, blue-black
 * text, hairlines the colour of kraft paper and a pleat green for anything that
 * asks for attention. Newsreader for display type, Instrument Sans for body text
 * and labels. docs/internal/brand.md has the reasoning and the full palette.
 *
 * Document typography lives in type.css, imported here so the infinite layout
 * and the print page can't drift apart (tokens.css is the one stylesheet both
 * load). It only styles markdown inside .fx-doc, so it's inert inside block
 * sandboxes.
 *
 * Fonts are SIL Open Font Licence (see fonts/). Static files rather than
 * variable fonts: Chrome embeds variable fonts in PDFs as Type 3, which renders
 * and searches worse than TrueType.
 */
@import url("type.css");

@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: block; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: block; }

:root {
  --fx-font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --fx-font-heading: "Newsreader", Georgia, "Times New Roman", serif;
  --fx-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fx-font-size: 15px;
  --fx-print-font-size: 10.5pt;
  --fx-line-height: 1.6;

  /* Ink, muted ink, paper, and a deeper paper for code and cards */
  --fx-color-text: #1d2326;
  --fx-color-muted: #5f6a6b;
  --fx-color-bg: #f7f3ec;
  --fx-color-surface: #eee8dc;
  --fx-color-border: #d9d0c0;
  /* Pleat green */
  --fx-color-accent: #0f6e64;
  --fx-color-accent-contrast: #ffffff;
  --fx-color-accent-soft: #dcebe5;

  --fx-radius: 8px;
  --fx-image-radius: 3px;
  --fx-space: 8px;

  /* Plicine's own, read by type.css and print.css. Blocks should fall back if they read them. */
  --px-color-card: #fdfbf7;
  --px-color-accent-light: #4fb3a4;
  --px-font-label: var(--fx-font-body);
}