/*
 * Typenik — the product layer over house.css.
 *
 * Everything that makes this site Typenik rather than another product
 * is here: the accent colour, the display face and a few extras.
 * For a new product, copy this file and change the tokens.
 */

@font-face { font-family: "Lora"; src: url("fonts/Lora-Variable.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/Lora-Italic-Variable.ttf") format("truetype"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.woff") format("woff"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Bold.woff") format("woff"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --brand-accent: #1a56db;          /* the app's own accent */
  --brand-accent-strong: #1446b8;
  --brand-accent-soft: #e9f0fd;
  --brand-on-accent: #ffffff;
  --brand-display: "Lora", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-accent: #8ab4ff;        /* the app's dark-theme accent */
    --brand-accent-strong: #a9c7ff;
    --brand-accent-soft: #17243b;
    --brand-on-accent: #0b1630;
  }
}
:root[data-theme="dark"] {
  --brand-accent: #8ab4ff;
  --brand-accent-strong: #a9c7ff;
  --brand-accent-soft: #17243b;
  --brand-on-accent: #0b1630;
}

/* Lora's italic, for the odd word that wants it. */
.display em, h1 em, h2 em { font-style: italic; font-weight: 500; }

/* The hero's status strip mimics the editor's status bar:
   "Spelling: Off · Long sentences: Off · 203 / 1,800 words". */
.hero .status { margin-top: 28px; }

/* A document file, shown as it sits on the server. */
.file-tree { font: 14px/1.9 var(--font-mono); color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 24px; }
.file-tree b { color: var(--ink); font-weight: 600; }
.file-tree .dim { color: var(--ink-3); }

/* Fonts with their Office twins. */
.font-sample { font-size: 22px; line-height: 1.2; color: var(--ink); }