/* ===== APPLE HIG TOKENS, shared by the three open hubs (24 Sep 2026) =====
   Benjie: fonts and colours may change on the open dashboards. One set for AU, UK and NZ.
   Type: the system font (SF Pro on Apple devices, Segoe UI / Roboto elsewhere). No web font files.
   Colour: Apple's semantic system colours, light and dark. Text uses the accessible (increased
   contrast) variants of green/red/orange/blue in light mode so every text pair passes 4.5:1.
   Text variants were darkened on 24 Sep to pass 4.5:1 on the grey fills too (#E3E3E9), not only on white.
   --hig-yellow is a fill only: never use it for text. */
:root {
  --hig-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --hig-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --hig-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* type ramp (iOS default Dynamic Type sizes, in rem at a 16px root: 17px = 1.0625rem). rem follows the reader's text size;
     open-edition.js scales the root from the iOS Text Size setting (capped at 1.4x). */
  --hig-large-title: 2.125rem; --hig-title1: 1.75rem; --hig-title2: 1.375rem; --hig-title3: 1.25rem;
  --hig-headline: 1.0625rem; --hig-body: 1.0625rem; --hig-callout: 1rem; --hig-subhead: 0.9375rem;
  --hig-footnote: 0.8125rem; --hig-caption1: 0.75rem; --hig-caption2: 0.6875rem;
  /* backgrounds */
  --hig-bg: #FFFFFF; --hig-bg2: #F2F2F7; --hig-bg3: #FFFFFF;
  --hig-grouped-bg: #F2F2F7; --hig-grouped-bg2: #FFFFFF;
  --hig-fill: rgba(120,120,128,0.20); --hig-fill2: rgba(120,120,128,0.16); --hig-fill3: rgba(118,118,128,0.12);
  /* text */
  --hig-label: #000000; --hig-label2: rgba(60,60,67,0.78); --hig-label3: rgba(60,60,67,0.60); --hig-label4: rgba(60,60,67,0.30);
  --hig-separator: rgba(60,60,67,0.29); --hig-separator-opaque: #C6C6C8;
  /* tint and system colours: fill (--x) and text-safe (--x-text) */
  --hig-tint: #007AFF; --hig-tint-text: #0059B8;
  --hig-blue: #007AFF; --hig-blue-text: #0040DD;
  --hig-green: #34C759; --hig-green-text: #19702F;
  --hig-red: #FF3B30; --hig-red-text: #C00013;
  --hig-orange: #FF9500; --hig-orange-text: #A82B00;
  --hig-yellow: #FFCC00; --hig-teal: #30B0C7; --hig-indigo: #5856D6; --hig-purple: #AF52DE; --hig-pink: #FF2D55; --hig-gray: #8E8E93;
  /* chart categorical order (use in this order everywhere) */
  --hig-chart-1: #007AFF; --hig-chart-2: #FF9500; --hig-chart-3: #34C759; --hig-chart-4: #AF52DE;
  --hig-chart-5: #30B0C7; --hig-chart-6: #FF2D55; --hig-chart-7: #5856D6; --hig-chart-8: #8E8E93;
  --hig-chart-grid: rgba(60,60,67,0.12); --hig-chart-axis: rgba(60,60,67,0.60);
  /* materials */
  --hig-bar-bg: rgba(249,249,249,0.80); --hig-bar-blur: saturate(180%) blur(20px);
  --hig-radius-card: 12px; --hig-radius-control: 10px; --hig-radius-pill: 999px;
  --hig-shadow-card: 0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
}
@media (prefers-color-scheme: dark) {
  :root {
    --hig-bg: #000000; --hig-bg2: #1C1C1E; --hig-bg3: #2C2C2E;
    --hig-grouped-bg: #000000; --hig-grouped-bg2: #1C1C1E;
    --hig-fill: rgba(120,120,128,0.36); --hig-fill2: rgba(120,120,128,0.32); --hig-fill3: rgba(118,118,128,0.24);
    --hig-label: #FFFFFF; --hig-label2: rgba(235,235,245,0.80); --hig-label3: rgba(235,235,245,0.60); --hig-label4: rgba(235,235,245,0.30);
    --hig-separator: rgba(84,84,88,0.65); --hig-separator-opaque: #38383A;
    --hig-tint: #0A84FF; --hig-tint-text: #409CFF;
    --hig-blue: #0A84FF; --hig-blue-text: #409CFF;
    --hig-green: #30D158; --hig-green-text: #30D158;
    --hig-red: #FF453A; --hig-red-text: #FF6961;
    --hig-orange: #FF9F0A; --hig-orange-text: #FFB340;
    --hig-yellow: #FFD60A; --hig-teal: #40C8E0; --hig-indigo: #5E5CE6; --hig-purple: #BF5AF2; --hig-pink: #FF375F; --hig-gray: #98989D;
    --hig-chart-1: #0A84FF; --hig-chart-2: #FF9F0A; --hig-chart-3: #30D158; --hig-chart-4: #BF5AF2;
    --hig-chart-5: #40C8E0; --hig-chart-6: #FF375F; --hig-chart-7: #5E5CE6; --hig-chart-8: #98989D;
    --hig-chart-grid: rgba(235,235,245,0.14); --hig-chart-axis: rgba(235,235,245,0.60);
    --hig-bar-bg: rgba(29,29,31,0.78);
    --hig-shadow-card: none;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  :root { --hig-label2: rgba(60,60,67,0.90); --hig-separator: rgba(60,60,67,0.45); --hig-bar-bg: var(--hig-bg); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --hig-label2: rgba(235,235,245,0.90); --hig-separator: rgba(84,84,88,0.90); --hig-bar-bg: var(--hig-bg); }
}