/* Shared Big Picture colour tokens. Keep this as the only brand-palette source. */
:root {
  /* 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-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%);
}

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