/*
 * brand.css — THE TESTARIUM SKIN.
 *
 * testarium.css is Notarium's four-layer token system copied verbatim, VARIABLE
 * NAMES AND ALL. That is deliberate and it is what makes this file possible:
 * every component in the design system reads layer-2 semantic tokens
 * (--nt-surface, --nt-accent) which read layer-1 ramps (--nt-c-seal-500), so
 * re-skinning the product is a matter of redefining the RAMPS and nothing else.
 * Rename a token here and you fork the design system.
 *
 * Loaded AFTER testarium.css in every layout (see
 * ApplicationHelper::LAYOUT_STYLESHEETS) — the whole file is overrides, and
 * order is the only thing making them win.
 *
 * WHAT CHANGES, and why (docs/PLAN.md §14.7):
 *
 *   --nt-c-seal-*   bordeaux → BLÆK, an ink-blue. Notarium sells a wax seal on
 *                   a corporate resolution; Testarium sells a fountain-pen
 *                   signature on a will. Bordeaux on a page about death reads
 *                   as blood; ink-blue reads as a document somebody signed.
 *                   The ramp keeps every stop the original had, including the
 *                   -350 that only the seal mark uses, because a missing stop
 *                   falls back to nothing rather than to a near neighbour.
 *
 *   --nt-c-petrol-* the info hue moves to SLATE — desaturated, no blue left in
 *                   it that could be mistaken for the brand. With an ink-blue
 *                   primary, a petrol-blue "til orientering" chip and a
 *                   brand-blue button are the same colour to most eyes at
 *                   arm's length, and the one that matters (the button) loses.
 *
 *   --nt-c-paper-*  warmer and lighter. Cream, not oatmeal: this is a
 *                   consumer product read on a phone in a living room, not an
 *                   accountant's tool read on a monitor.
 *
 *   --nt-c-amber-*  gains a RAV (amber) stop used by the mark alone. It is
 *                   the only warm accent in the product and it is reserved:
 *                   the moment it appears on a button it stops being the mark.
 *
 * WHAT DOES NOT CHANGE: green / amber / red keep their ramps AND their
 * meanings — green is "done", amber is "still to do", red is "this has gone
 * wrong". Those meanings are carried in every component's CSS and in
 * DesignSystemHelper, and re-pointing them here would desynchronise the two.
 */

:root {
  /* ── Paper: cream ──────────────────────────────────────────────────── */
  --nt-c-paper-50: #fdfbf6;
  --nt-c-paper-100: #f8f4ea;
  --nt-c-paper-200: #f0ebdd;
  --nt-c-paper-300: #e6dfcd;
  --nt-c-paper-400: #ddd5c0;
  --nt-c-paper-500: #c8bda3;

  /* ── Blæk: the identity ramp, replacing bordeaux ───────────────────── */
  /* Named --nt-c-seal-* on purpose. The variable is the SLOT ("the brand
     hue"), not a description of the colour, and every component already
     points at it. */
  --nt-c-seal-50: #eaeff6;
  --nt-c-seal-100: #d7e1ef;
  --nt-c-seal-200: #b0c3dd;
  --nt-c-seal-300: #7d9cc4;
  --nt-c-seal-350: #4f76a8;
  --nt-c-seal-400: #37608f;
  --nt-c-seal-500: #1f4675;
  --nt-c-seal-600: #193a63;
  --nt-c-seal-700: #142f52;
  --nt-c-seal-800: #0e2340;

  /* ── Slate: informational, deliberately not blue ───────────────────── */
  --nt-c-petrol-50: #eeeff0;
  --nt-c-petrol-100: #e0e2e4;
  --nt-c-petrol-200: #c4c8cc;
  --nt-c-petrol-300: #9ba1a8;
  --nt-c-petrol-400: #737a83;
  --nt-c-petrol-500: #565d66;
  --nt-c-petrol-600: #4a5059;
  --nt-c-petrol-700: #3b4048;

  /* ── Rav: the mark's accent, and nothing else ──────────────────────── */
  /* Not on any semantic token. A component that wants this has to name it,
     which is the point: it should be a decision, not a default. */
  --nt-c-rav-400: #d8a04a;
  --nt-c-rav-500: #c4842a;
  --nt-c-rav-600: #a86c1c;

  /* Dark-mode tint grounds for the two ramps that moved. These are NOT the
     ramps mixed with black — a saturated dark blue and "blue mixed into
     near-black" are different colours, and the second is the one that reads
     as a surface rather than as a swatch. */
  --nt-c-seal-ink: #141d2b;
  --nt-c-seal-ink-2: #1e2c40;
  --nt-c-petrol-ink: #1b1d20;
  --nt-c-petrol-ink-2: #292c30;

  /* ── Type ──────────────────────────────────────────────────────────── */
  /* Newsreader for display: a contemporary text serif with real italics,
     drawn for screens, where Fraunces' wonky axis reads as a magazine. The
     woff2 is not vendored yet, so Fraunces (which IS vendored) is the first
     fallback rather than a system serif — the page must never drop to Georgia
     while waiting for a font nobody has added.
     TODO(workstream G1): vendor testarium-newsreader-latin.woff2 and its
     -ext cut, declare the faces in application.css, and add the preload in
     shared/_head next to Inter's. */
  --nt-font-display: "Newsreader", "Fraunces", "Iowan Old Style", Georgia, serif;

  /* Body, document and mono are unchanged: Inter reads on a phone, Source
     Serif 4 is what the will itself is set in (and what the PDF pass
     inlines), JetBrains Mono carries § references and order numbers. */

  /* ── Scale ─────────────────────────────────────────────────────────── */
  /* 1rem base, up from Notarium's 0.94. Notarium is a tool used all day by
     someone who wants density; this is read once, on a phone, by someone who
     may be sixty and is thinking about dying. Density is not the goal. */
  --nt-text-xs: 0.78rem;
  --nt-text-sm: 0.88rem;
  --nt-text-base: 1rem;
  --nt-text-md: 1.08rem;
  --nt-text-lg: 1.24rem;
  --nt-text-xl: 1.5rem;
  --nt-text-2xl: 1.95rem;
  --nt-text-3xl: 2.5rem;
}

/* The one type rule that is not a token: the marketing H1 fluid clamp.
   `clamp()` cannot live on a raw token and be reused, because the middle term
   is viewport-relative and would resolve once. */
.nt-marketing h1,
.nt-h1-display {
  font-family: var(--nt-font-display);
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 500;
}

/* Italic is the display face's emphasis, not bold. A will is a formal
   document and the brand voice is calm; a bolded phrase in a headline about
   inheritance shouts. */
.nt-marketing h1 em,
.nt-h1-display em {
  font-style: italic;
  font-weight: inherit;
  color: var(--nt-c-seal-500);
}