/* Design tokens — extracted from MYSihat_FINAL_v6.html.
   Single source of colour. Do not hardcode a hex value anywhere else. */
:root {
  --bg: #F7F5F0;
  --surface: #FFFFFF;
  --surface2: #F2F0EB;

  --green: #0B8F6C;
  --green2: #13B885;
  --green3: #D4F5E9;

  --gold: #F5A425;
  --gold2: #FEF0D6;

  --blue: #4A90D9;
  --blue2: #E8F2FC;

  --red: #E8514A;
  --amber: #E8900A;
  --amber2: #FEF3DC;

  --purple: #7B61FF;
  --purple2: #F0ECFF;

  --text: #111827;
  --text2: #6B7280;
  --text3: #9CA3AF;

  --border: rgba(0, 0, 0, .07);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, .06);
  --shadow: 0 4px 20px rgba(0, 0, 0, .08);
  --shadow-lg: 0 12px 48px rgba(0, 0, 0, .12);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
}

/* Band colours key off score.js band names, never off raw numbers.
   Adding a band in lib/config.js means adding one line here. */
:root {
  --band-well_balanced: var(--green);
  --band-generally_balanced: var(--green2);
  --band-needs_improvement: var(--amber);
  --band-significantly_unbalanced: var(--red);
}

/* Extended palette — values the v6 mockup left inline, promoted to tokens
   so no component file carries a raw hex. */
:root {
  --green-deep: #0AA875;
  --green-dark: #0B6E52;
  --ink: #0D1117;
  --ink2: #1E2535;
  --violet: #5B3FCC;
  --violet-deep: #4A2FCC;
  --violet-mid: #6B47CC;
  --violet-light: #8B5CF6;
  --violet-alt: #9B59B6;
  --gold-deep: #7A4F00;
  --gold-deep2: #9B6400;
  --brown: #3D2410;
  --brown-light: #7A5030;
  --brown-mid: #5C3018;
  --brown-dark: #2A1408;
}

/* Third-party brand colours. Fixed by those brands — do not restyle. */
:root {
  --brand-facebook: #1877F2;
  --brand-whatsapp: #25D366;
  --brand-instagram1: #833AB4;
  --brand-instagram2: #FD1D1D;
  --brand-instagram3: #FCB045;
}