/* THEME TOKENS for Glow Inclusive. The only file to edit to re-brand: colours, type, shape.
   site.css contains no colour values, only var(--token). Contrast ratios (WCAG 2.1 AA, checked 8 Nov 2026) are noted.
   Direction: Mel's logo (Nov 2026). Deep teal-navy ink from "INCLUSIVE", the logo's teal for actions, and the four
   tagline colours (Move teal, Connect coral, Belong purple, Glow orange) used together as one signature spectrum,
   never as text on white except the purple, which passes.
   Type: Fraunces (Undercase Type, SIL OFL) for headings, warm and confident beside the script logo;
   Atkinson Hyperlegible Next (Braille Institute, SIL OFL) for everything people read, drawn for low-vision readers. */
:root {
  --font-body: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  --ink: #0b3550;          /* teal-navy: body text on paper 12.8, on surface 11.8 */
  --muted: #3f5a6b;        /* secondary text on paper 7.3, on surface 6.7 */
  --paper: #ffffff;
  --surface: #eef7f6;      /* teal mist: alternate bands, cards */
  --surface-2: #ddefec;    /* hover, stripes */
  --line: #c6e0dc;         /* decorative dividers only */
  --field-border: #5d7a85; /* input borders on paper 4.6 */

  --primary: #08706f;      /* logo teal, deepened for buttons and links; white on it 5.9 */
  --primary-deep: #065857; /* hover; white on it 8.3 */
  --on-primary: #ffffff;
  --accent: #6c4884;       /* "Belong" purple: small highlights as TEXT on paper 7.3, surface 6.7, glow-soft 6.2 */
  --accent-fill: #fc9024;  /* "Glow" orange: decoration, and as a fill under navy text (6.1) */
  --glow-soft: #fdeadf;    /* warm peach halo; ink on it 11.0 */
  --glow-clear: #fdeadf00; /* the halo's transparent edge */
  --mist-glow: #d9f0ec;    /* the teal halo that meets the peach one in the hero */
  --mist-clear: #d9f0ec00;

  /* The four logo colours, for decoration only (ribbons, rules, dots). Never text on white. */
  --brand-teal: #0e9494;
  --brand-coral: #f46460;
  --brand-purple: #8b6196;
  --brand-orange: #fc9024;
  /* Soft tints of the four, behind icons; the icon strokes use the deeper partner (all 4.5 or more on their tint). */
  --tint-teal: #dcf1ee;   --deep-teal: #08706f;
  --tint-coral: #fde4e1;  --deep-coral: #b0322a;
  --tint-purple: #efe6f4; --deep-purple: #6c4884;
  --tint-orange: #fdeadf; --deep-orange: #94490a;

  --dark: #0a2f45;         /* deep navy: cta band, topline, footer */
  --on-dark: #ffffff;      /* 13.9 */
  --on-dark-muted: #cfe3ea;/* 10.5 */
  --on-dark-line: #24506a;
  --on-dark-accent: #fc9024; /* orange on navy 6.1 */
  --on-dark-teal: #4cc9c2;   /* tagline words on navy: teal 6.9, coral 5.5, purple 6.5 */
  --on-dark-coral: #ff7a72;
  --on-dark-purple: #c9a3dc;

  --danger: #a3241c;       /* 7.4 */
  --ok: #1d6b3a;           /* 6.5 */
  --notice-info: #e9f5f3;
  --notice-warn: #fff0e0;
  --focus: #6c4884;        /* 3px ring; 6.1 or more on every light background */

  --radius: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --wrap: 70rem;
  --gutter: clamp(1rem, 4vw, 2rem); /* never below 16px */
  --shadow: 0 1px 2px #0b355014, 0 12px 30px #0b35500f;
}

/* High contrast (the reader's choice, from the "Reading options" buttons). Black on white, no tints. */
html[data-contrast=high] {
  --ink: #000000;
  --muted: #1a1a1a;
  --surface: #ffffff;
  --surface-2: #f0f0f0;
  --line: #000000;
  --field-border: #000000;
  --primary: #00403f;      /* white on it 12.0 */
  --primary-deep: #002524;
  --accent: #3d1a52;       /* 14.2 */
  --glow-soft: #ffffff;
  --glow-clear: #ffffff00;
  --mist-glow: #ffffff;
  --mist-clear: #ffffff00;
  --notice-info: #ffffff;
  --notice-warn: #ffffff;
  --tint-teal: #ffffff; --tint-coral: #ffffff; --tint-purple: #ffffff; --tint-orange: #ffffff;
  --deep-teal: #000000; --deep-coral: #000000; --deep-purple: #000000; --deep-orange: #000000;
  --dark: #000000;
  --on-dark-muted: #ffffff;
  --focus: #000000;
}