/* Pinfolk brand tokens - Direction A, "Gold Pin".
 * Generated from tokens.json by tools/build_brand.py; edit tokens.json, then rebuild.
 *
 * Fonts. Display and voice use the serif stack below: Charter ships with Apple
 * platforms; everyone else gets Source Serif 4 from Google Fonts. Body text uses
 * Inter. Both are SIL Open Font License, from one stylesheet. Add to <head>:
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:ital,wght@0,700;1,400;1,700&display=swap">
 * Never use Apple's New York or SF fonts in logos, banners or web graphics.
 */
:root {
  /* colour: core */
  --pf-forest: #073521; /* Brand ground. Banners, social backgrounds, the dark half of every layout. The field the pin sits on in the app icon. */
  --pf-gold: #F1AB1D; /* The pin. The mark, keylines on forest, one accent per layout. Text only on forest (6.87:1) or pine (5.15:1), never on cream. */
  --pf-cream: #FFF9EB; /* Light ground and reversed text on forest (12.99:1). */
  /* colour: forest */
  --pf-forest-deep: #032C1C; /* Deepest ground, vignettes, the one-colour (mono) logo ink. Cream on it 14.48:1. */
  --pf-pine: #0F4A36; /* Headlines and body on cream (9.74:1), filled buttons, the wordmark on light grounds. */
  --pf-moss: #638C3B; /* Illustration only: foliage in drawn graphics. Never text, never a ground. */
  /* colour: gold */
  --pf-gold-light: #FEE04C; /* Highlight on the pin ring, sun glints, rules on forest. Graphics only. */
  --pf-sunlit: #FBE7A7; /* Golden-hour sky tint, soft panels on cream, the sky of the flat mark. */
  --pf-antique: #BC8A34; /* Hairlines and frames on cream (2.93:1: graphics only, never text). */
  --pf-gold-shade: #9B5000; /* The pin's outer keyline and shadow side. Graphics only. */
  --pf-gold-ink: #704F1C; /* Gold-coloured text on cream (7.08:1): kickers and small labels. */
  /* colour: neutral */
  --pf-parchment: #FAF4E4; /* Second light ground: cards on cream, the medallion field. */
  --pf-ink: #26342D; /* Long body text on cream (12.41:1). */
  --pf-muted: #617064; /* Secondary text and captions on cream (4.99:1). */

  /* type */
  --pf-font-display: Charter, "Bitstream Charter", "Source Serif 4", "Charis SIL", Cambria, Georgia, serif;
  --pf-font-text: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pf-font-voice: Charter, "Bitstream Charter", "Source Serif 4", "Charis SIL", Cambria, Georgia, serif;
  --pf-weight-display: 700;
  --pf-leading-display: 1.08;
  --pf-leading-text: 1.55;
  --pf-tracking-display: -0.01em;
  --pf-size-display-xl: clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem);
  --pf-size-display-l: clamp(2rem, 1.55rem + 1.9vw, 3rem);
  --pf-size-display-m: clamp(1.5rem, 1.3rem + 0.85vw, 2rem);
  --pf-size-body-l: 1.1875rem;
  --pf-size-body: 1rem;
  --pf-size-caption: 0.8125rem;
  --pf-size-kicker: 0.75rem;

  /* shape */
  --pf-radius-card: 20px;
  --pf-radius-button: 999px;
  --pf-radius-image: 16px;

  /* roles on a cream ground (the default) */
  --pf-bg: var(--pf-cream);
  --pf-surface: var(--pf-parchment);
  --pf-heading: var(--pf-pine);          /* 9.74:1 */
  --pf-text: var(--pf-ink);              /* 12.41:1 */
  --pf-text-muted: var(--pf-muted);      /* 4.99:1 */
  --pf-kicker: var(--pf-gold-ink);       /* 7.08:1 */
  --pf-accent: var(--pf-gold);           /* graphics only on cream */
  --pf-rule: var(--pf-antique);
  --pf-button-bg: var(--pf-pine);
  --pf-button-text: var(--pf-cream);     /* 9.74:1 */
  --pf-focus: var(--pf-pine);
}

/* Roles on a forest ground: add class="pf-on-forest" (or data-theme="forest") to any block. */
.pf-on-forest,
[data-theme="forest"] {
  --pf-bg: var(--pf-forest);
  --pf-surface: var(--pf-forest-deep);
  --pf-heading: var(--pf-cream);         /* 12.99:1 */
  --pf-text: var(--pf-cream);            /* 12.99:1 */
  --pf-text-muted: var(--pf-sunlit);     /* 11.10:1 */
  --pf-kicker: var(--pf-gold);           /* 6.87:1 */
  --pf-accent: var(--pf-gold);
  --pf-rule: var(--pf-gold);
  --pf-button-bg: var(--pf-gold);
  --pf-button-text: var(--pf-forest-deep); /* 7.66:1 */
  --pf-focus: var(--pf-gold-light);
}