/* Dorpsdraad studio brand: tokens.css (Designer, 11 Oct 2026)
   Drop-in for sites/dorpsdraad.co.za: copy this file AND the fonts/ folder next to it
   (e.g. public/css/tokens.css + public/css/fonts/), load it BEFORE style.css, then delete the
   provisional :root palette in style.css. The bottom block maps the provisional names to the brand.
   Fonts: Petrona + Source Sans 3 (SIL OFL 1.1), self-hosted woff2, latin + latin-ext. See fonts/LICENSES.md. */

@font-face { font-family: 'Petrona'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('fonts/petrona-italic-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Petrona'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('fonts/petrona-italic-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Petrona'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url('fonts/petrona-normal-600-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Petrona'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url('fonts/petrona-normal-600-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/source-sans-3-italic-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/source-sans-3-italic-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/source-sans-3-normal-400-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/source-sans-3-normal-400-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* core palette */
  --dd-bloekom: #2e5b4b;  /* Bloekom: primary: buttons, links on paper, the 'd' in the mark, theme-color */
  --dd-koper: #a8501f;  /* Koperdraad: accent: the thread, primary CTA buttons (white text), highlights */
  --dd-ink: #1f2622;  /* Ink: ink: body text, headings, dark backgrounds */
  --dd-papier: #faf6ef;  /* Papier: paper: page background, text on dark */
  --dd-klip: #565c55;  /* Klip: muted: secondary text, captions, meta */
  --dd-spekboom: #2f6b34;  /* Spekboom: success: form 'sent' messages, ticks, OK states */
  /* supporting neutrals & states */
  --dd-kalk: #f1e9dc;  /* Kalk: paper-2: alternate section background */
  --dd-kaart: #fffdf9;  /* Kaart: card surface */
  --dd-riet: #ddd2c1;  /* Riet: lines, borders, dividers (non-text) */
  --dd-koper-donker: #8a3f16;  /* Koper (donker): accent hover; accent-coloured text on Kalk */
  --dd-koper-lig: #e3a466;  /* Koper (lig): the thread on dark backgrounds (decoration only, never body text on green) */
  --dd-baksteen: #a3341f;  /* Baksteen: error: form errors */

  /* semantic roles */
  --dd-primary: var(--dd-bloekom);    --dd-on-primary: var(--dd-papier);
  --dd-accent: var(--dd-koper);       --dd-on-accent: #ffffff;
  --dd-text: var(--dd-ink);           --dd-text-muted: var(--dd-klip);
  --dd-bg: var(--dd-papier);          --dd-bg-alt: var(--dd-kalk);  --dd-surface: var(--dd-kaart);
  --dd-success: var(--dd-spekboom);   --dd-error: var(--dd-baksteen);
  --dd-focus: var(--dd-bloekom);
  --dd-font-head: 'Petrona', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --dd-font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --dd-fw-head: 600;  --dd-fw-head-strong: 700;  --dd-fw-body: 400;  --dd-fw-body-bold: 600;
  --dd-radius: 12px;  --dd-radius-pill: 999px;

  /* provisional names in sites/dorpsdraad.co.za/public/css/style.css -> brand */
  --ink: var(--dd-ink);
  --muted: var(--dd-klip);
  --bg: var(--dd-papier);
  --bg-alt: var(--dd-kalk);
  --card: var(--dd-kaart);
  --green: var(--dd-bloekom);
  --ochre: var(--dd-koper);
  --ochre-dark: var(--dd-koper-donker);
  --line: var(--dd-riet);
  --serif: var(--dd-font-head);
  --sans: var(--dd-font-body);
}

/* theme-color / webmanifest: use #2e5b4b (Bloekom); background_color #faf6ef (Papier). */