/*
 * Paper: design tokens. The only place these colors, radii and font stacks are defined;
 * skin.css and status.css read them and never hardcode their own.
 *
 * The accent comes from the page's one nonce'd accent block (DESIGN §4.8), set from the Look
 * page: a preset (terracotta #b4492b, forest #2f6b47, ink blue #25508e, plum #7b3a6a) or any
 * color the owner picks. The skin draws with --lb-accent-ink, the accent moved just far enough
 * toward black to read as text on --pp-bg (4.5:1; the manifest's contrast_bg), the darkest
 * surface, so it reads on every lighter card too. A pale custom color (a bright yellow) still
 * passes AA everywhere it is used: as text, as an edge and as the featured button's fill under
 * --pp-on-accent. Every preset passes as it is, so for them ink and accent are the same color.
 * Hover is 18% toward black, which only adds contrast on paper.
 *
 * Contrast (WCAG 2.x ratios; AA = 4.5 for body text):
 *                            on --pp-bg   on --pp-raised   on --pp-card
 *   --pp-text                  15.34          16.29            17.00
 *   --pp-muted                  6.70           7.12             7.43
 *   --pp-faint                  5.32           5.65             5.90
 *   --pp-accent (terracotta)    4.75           5.04             5.26
 *   --pp-accent (forest)        5.63           5.98             6.24
 *   --pp-accent (ink blue)      7.13           7.57             7.90
 *   --pp-accent (plum)          7.02           7.46             7.78
 * Text ON an accent fill is --pp-on-accent (the paper's lightest white), which reads at least
 * at the --pp-bg ratio (contrast is symmetric, and the card is lighter than the page).
 * tests/links/skins/ContrastTest.php checks every preset and the worst custom colors.
 */

:root {
  color-scheme: light;

  /* Surfaces: the page, the panels raised off it, the cards (buttons, the latest strip). */
  --pp-bg: #f6f1e7;
  --pp-raised: #fbf8f2;
  --pp-card: #fffdf9;
  --pp-border: #e4dccd;
  --pp-border-strong: #cdc1ac;

  /* Text */
  --pp-text: #1f1a14;
  --pp-muted: #5c5347;
  --pp-faint: #6b6255;

  /* Accent (the default preset, terracotta, until the accent block sets its own) */
  --pp-accent: var(--lb-accent-ink, #b4492b);
  --pp-accent-hover: color-mix(in srgb, var(--pp-accent) 82%, black);
  --pp-on-accent: var(--pp-card);

  /* Ink shadows: soft, warm, never a hard edge. */
  --pp-shadow: 0 1px 0 rgba(31, 26, 20, 0.04), 0 6px 18px -12px rgba(31, 26, 20, 0.28);
  --pp-shadow-lift: 0 1px 0 rgba(31, 26, 20, 0.05), 0 12px 26px -14px rgba(31, 26, 20, 0.36);

  /* Status */
  --pp-danger: #a8321f;
  --pp-success: #2e6a3c;
  --pp-warning: #8a5300;

  /* Type. Body, buttons and small tracked caps are Montserrat in every title style. */
  --pp-font-body: "Montserrat Variable", "Montserrat Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pp-font-caps: var(--pp-font-body);

  /* Display titles, set by the title style on <html data-type="serif|serif-italic|small-caps">. */
  --pp-font-display: "Fraunces Variable", "Fraunces Fallback", Georgia, "Times New Roman", ui-serif, serif;
  --pp-display-weight: 560;
  --pp-display-style: normal;
  --pp-display-case: none;
  --pp-display-tracking: -0.015em;
  --pp-display-leading: 1.08;
  --pp-display-scale: 1;

  /* Shape */
  --pp-radius-sm: 10px;
  --pp-radius: 14px;
  --pp-radius-lg: 18px;

  /* Tracking for uppercase text */
  --pp-track-caps: 0.08em;
  --pp-track-wide: 0.28em;
}

/* Title styles. The attribute goes on <html>; on any other element it scopes the style. */
[data-type="serif"] {
  --pp-font-display: "Fraunces Variable", "Fraunces Fallback", Georgia, "Times New Roman", ui-serif, serif;
  --pp-display-weight: 560;
  --pp-display-style: normal;
  --pp-display-case: none;
  --pp-display-tracking: -0.015em;
  --pp-display-leading: 1.08;
  --pp-display-scale: 1;
}

[data-type="serif-italic"] {
  --pp-font-display: "Fraunces Variable", "Fraunces Fallback", Georgia, "Times New Roman", ui-serif, serif;
  --pp-display-weight: 480;
  --pp-display-style: italic;
  --pp-display-case: none;
  --pp-display-tracking: -0.01em;
  --pp-display-leading: 1.08;
  --pp-display-scale: 1.04;
}

[data-type="small-caps"] {
  --pp-font-display: "Montserrat Variable", "Montserrat Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pp-display-weight: 650;
  --pp-display-style: normal;
  --pp-display-case: uppercase;
  --pp-display-tracking: 0.16em;
  --pp-display-leading: 1.2;
  --pp-display-scale: 0.62;
}