/* OctagonSquare colour system — locked from the brand Playbook.
   Warm and human: olive Ink, warm Paper off-white, brand Orange,
   supported by Blue and Green, with an extended set for data + illustration.
   No pure white (#FFFFFF) is a brand colour — Paper is the light. */
:root {
  /* ---- Core palette ---- */
  --os-ink: #36382E;          /* Primary text, dark sections, the octagon mark */
  --os-paper: #EDE6E3;        /* Primary background, text on dark/coral surfaces */
  --os-orange: #C0503A;       /* Primary brand accent, key emphasis, primary buttons */
  --os-blue: #126D92;         /* Secondary accent, pillar coding, links */
  --os-green: #4E7C6E;        /* Third accent, pillar coding */

  /* ---- Extended palette (data, illustration, soft fills) ---- */
  --os-coral: #F06449;        /* Headline emphasis, the brand dot, high-energy CTA */
  --os-coral-light: #F7B1A4;  /* Soft fills, backgrounds, charts */
  --os-green-mid: #619B8A;    /* Charts, secondary accent */
  --os-green-light: #B0CDC5;  /* Soft fills, charts */
  --os-blue-mid: #1688B6;     /* Charts, secondary accent */
  --os-blue-light: #8AC3DB;   /* Soft fills, charts */
  --os-plum: #9E6475;         /* Charts, accent variety */
  --os-orange-bright: #E97749;/* Use sparingly: a rare bright accent, last in the data order */
  --os-cyan: #40C0E0;         /* Charts, accent */

  /* ---- Tints derived for surfaces and borders (warm, never grey) ---- */
  --os-paper-deep: #E3DAD5;   /* Slightly deeper paper for nested surfaces */
  --os-paper-card: #F1ECE9;   /* A touch lighter than Paper for cards */
  --os-ink-80: rgba(54, 56, 46, 0.80);  /* Photo panels, overlays */
  --os-ink-55: rgba(54, 56, 46, 0.55);  /* Card-on-photo panel */
  --os-ink-12: rgba(54, 56, 46, 0.12);  /* Hairline borders on paper */
  --os-ink-20: rgba(54, 56, 46, 0.20);  /* Stronger hairline / inputs */
  --os-stone: #7A776B;        /* Muted ink for captions, attributions */

  /* ---- Semantic aliases ---- */
  --text-body: var(--os-ink);
  --text-muted: var(--os-stone);
  --text-on-dark: var(--os-paper);
  --text-link: var(--os-blue);

  --surface-page: var(--os-paper);
  --surface-card: var(--os-paper-card);
  --surface-deep: var(--os-paper-deep);
  --surface-dark: var(--os-ink);
  --surface-cta: var(--os-coral);

  --accent-primary: var(--os-orange);
  --accent-secondary: var(--os-blue);
  --accent-tertiary: var(--os-green);
  --accent-energy: var(--os-coral);

  --border-hairline: var(--os-ink-12);
  --border-strong: var(--os-ink-20);

  /* Pillar coding — keep the order Orange, Green, Blue, Coral */
  --pillar-1: var(--os-orange);
  --pillar-2: var(--os-green);
  --pillar-3: var(--os-blue);
  --pillar-4: var(--os-coral);

  /* Focus ring */
  --focus-ring: var(--os-blue);
}