:root {
    /* Brand palette pulled from logo */
    --navy: #0E2340;        /* logo background navy */
    --navy-deep: #081629;
    --navy-600: #14304F;
    --navy-500: #1C3D63;
    --steel: #A9B7CE;        /* logo light blue */
    --steel-soft: #CBD4E1;
    --steel-deep: #6D83A3;
    --ivory: #F7F5F0;
    --paper: #FBFAF5;
    --cream: #EEE8DC;
    --accent: #C9A961;       /* warm gold — donation moments */
    --accent-bright: #D7B56C; /* hover / active gold */
    --accent-deep: #9E8340;
    --alert: #C8342C;        /* verdict red like their "VERDICT ALERT" */
    --rule: rgba(14, 35, 64, 0.12);
    --rule-strong: rgba(14, 35, 64, 0.25);

    --display: "Oswald", "Barlow Condensed", ui-sans-serif, sans-serif;
    --cond: "Barlow Condensed", "Oswald", ui-sans-serif, sans-serif;
    --sans: "Barlow", ui-sans-serif, system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--sans);
    color: var(--navy);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  button { font-family: inherit; }
  a { color: inherit; }
  ::selection { background: var(--navy); color: var(--ivory); }