/* Quickreach design tokens: the one place brand colours, type, corners and
   control sizes are defined. Loaded first by every page (home, privacy,
   terms, 404); home.css and site.css only map these to their own roles. */

:root {
  /* brand palette */
  --midnight:      #10222E;   /* logo background, dark bands, text on light */
  --midnight-deep: #0B1820;   /* page ground in dark mode, homepage canvas   */
  --ivory:         #EDE7D3;   /* logo line art, text on midnight             */
  --mist:          #BAC3C6;   /* secondary text on midnight                  */
  --brass:         #C9A45C;   /* the one accent: buttons, highlights         */
  --brass-hover:   #D4B16C;
  --brass-deep:    #8A6A2E;   /* brass for small text and focus on light     */
  --paper:         #F7F4EC;   /* light page background                       */

  /* type: device UI face for reading (like a chat app), Poppins for headings */
  --font-text:    "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-ar:      "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;

  /* corners */
  --radius-sm:   10px;        /* bubbles, small buttons, inputs  */
  --radius-lg:   18px;        /* cards, panels                   */
  --radius-pill: 999px;       /* primary buttons, toggles        */

  /* controls: nothing tappable is shorter than --tap */
  --tap:       44px;
  --control-lg: 52px;

  /* focus ring */
  --focus: var(--brass-deep);
  --focus-ring: 2px solid var(--focus);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
:root[data-theme="dark"] { --focus: var(--brass); }