/* Shared Big Picture design tokens: colour, typography and spacing. */
:root {
  /* Authoritative font roles. Fallbacks do not count as delivered brand fonts. */
  --bp-heading-font: "Emona", Georgia, "Times New Roman", serif;
  --bp-body-font: "Inter", Arial, sans-serif;
  --bp-type-page: 36px;
  --bp-type-section: 26px;
  --bp-type-card: 18px;
  --bp-type-intro: 17px;
  --bp-type-body: 16px;
  --bp-type-label: 14px;
  --bp-type-meta: 12px;
  --bp-type-value: 28px;
  --bp-type-instrument-name: 16px;
  --bp-type-instrument-value: calc(var(--bp-type-instrument-name) * .9);
  --bp-type-instrument-period: calc(var(--bp-type-instrument-value) * .9);
  --bp-leading-heading: 1.2;
  --bp-leading-body: 1.5;

  /* Approved brand palette */
  --bp-red: #e41000;
  /* Blue has been retired from the reader palette.  These legacy names remain
     only so older view code resolves to the new neutral roles. */
  --bp-sky: #e6e6e6;
  --bp-blue: #000000;
  --bp-ink: #09152c;
  --bp-yellow: #feab03;
  --bp-news-green: #0b6458;
  --bp-green: var(--bp-news-green);
  --bp-green-dark: #087257;
  --bp-green-soft: #eff8f3;
  --bp-green-border: #a2d7bd;
  --bp-grey: #e6e6e6;
  --bp-surface: #ffffff;
  --bp-brand4-200: #D9E0DF;
  --bp-black: #000000;

  /* Semantic roles. Text roles always meet AA on their stated surface. */
  --color-action: var(--bp-green);
  --color-link: var(--bp-news-green);
  --color-hover: var(--bp-green-soft);
  --color-ink: var(--bp-ink);
  --color-warning-fill: var(--bp-yellow);
  --color-warning-text: var(--bp-ink);
  --color-positive-fill: var(--bp-green);
  --color-positive-text: var(--bp-ink);
  --color-negative-fill: var(--bp-red);
  --color-negative-text: var(--bp-red);
  --color-divider: var(--bp-grey);
  --color-surface: var(--bp-surface);
  --color-focus: var(--bp-green-dark);
  --color-focus-on-dark: var(--bp-surface);

  /* Compatibility aliases used by the reader templates. */
  --dark-moss: var(--bp-ink);
  --dark-moss-deep: var(--bp-ink);
  --dark-moss-mid: var(--bp-green-dark);
  --teal: var(--color-link);
  --teal-mid: var(--bp-green-dark);
  /* Mint is retired; keep the alias for older view code on the Nyheder green. */
  --mint: var(--bp-news-green);
  --denim: var(--bp-black);
  --light-denim: var(--bp-sky);
  --warm-sand: var(--bp-yellow);
  --cotton: var(--bp-surface);
  --brand-copper: var(--bp-red);
  --copper: var(--bp-red);
  --bg: var(--color-surface);
  --bg-2: var(--color-surface);
  --surface: var(--color-surface);
  --surface-2: var(--bp-grey);
  --border: var(--color-divider);
  --border-input: var(--bp-green-border);
  --teal-dark: var(--bp-ink);
  --teal-dim: var(--bp-green-soft);
  --teal-border: var(--bp-green-border);
  --teal-hover: #e2f5ea;
  --teal-disabled: #86c8aa;
  --text: var(--color-ink);
  --text-2: var(--color-ink);
  --muted: var(--bp-black);
  --muted-2: var(--bp-black);
  --green: var(--color-positive-text);
  --green-bg: var(--bp-green-soft);
  --green-border: var(--bp-green);
  --amber: var(--color-warning-text);
  --amber-bg: var(--bp-yellow);
  --amber-border: var(--bp-yellow);
  --red: var(--color-negative-text);
  --red-bg: var(--bp-surface);
  --red-border: var(--bp-red);
  --focus-ring: var(--color-focus);
  --focus-ring-on-dark: var(--color-focus-on-dark);
  --skeleton-base: var(--bp-grey);
  --skeleton-highlight: var(--bp-surface);
  --radius: 10px;
  --shadow: 0 1px 4px rgb(9 21 44 / 7%), 0 2px 12px rgb(0 0 0 / 4%);
}

@media (max-width: 900px) {
  :root {
    --bp-type-page: 30px;
    --bp-type-section: 24px;
    --bp-type-intro: 16px;
    --bp-type-value: 26px;
  }
}

body {
  font-family: var(--bp-body-font);
  font-size: var(--bp-type-body);
  line-height: var(--bp-leading-body);
}

button, input, select, textarea, table {
  font-family: var(--bp-body-font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bp-heading-font);
}

/* A single native-control accent keeps every reader surface on brand. */
input[type="range"], input[type="checkbox"], input[type="radio"] {
  accent-color: var(--teal);
}