/* FoilFinder design tokens — single source of truth.
 * All CSS files use var(--token) for color, radius, shadow, and spacing values.
 * Never use hex literals for brand colors in any CSS file; change values here only.
 *
 * Load order: _tokens.css is loaded first (via inject_site_chrome / _base.html)
 * before any page-specific CSS so tokens are defined when needed.
 */

:root {
  /* --- Brand palette --- */
  --purple:      #A04AFC;   /* CTAs, advisor accents, flow page accent color */
  --purple-deep: #7b2fd8;   /* purple hover state */
  --purple-soft: #f1e3ff;   /* purple highlight backgrounds */
  --teal:        #0077AA;   /* FoilFinder brand teal — links, header chrome */
  --teal-light:  #0099D9;   /* nav background */
  --sky:         #80BBD2;   /* avatars, secondary accents, info states */
  --sky-soft:    #d8ecf3;
  --gold:        #EEB61B;   /* gold accents */
  --gold-soft:   #fef0d4;   /* gold highlight backgrounds */

  /* --- Surfaces --- */
  --bg:          #faf7f2;   /* site-wide page background */
  --paper:       #ffffff;   /* card surfaces */
  --paper-warm:  #fdfbf6;   /* slightly warm card surfaces */
  --line:        #ece6dc;   /* borders */
  --line-soft:   #f3eee5;   /* subtle dividers */

  /* --- Text --- */
  --charcoal:    #32322C;   /* primary body text */
  --ink-soft:    #5c5c54;   /* secondary/muted text */

  /* --- Highlights --- */
  --gap:         #f6e3a8;   /* quiver-gap highlight background */
  --gap-stroke:  #d6a52a;   /* quiver-gap accent stroke */

  /* --- Radii --- */
  --r-sm:   10px;
  --r-md:   18px;
  --r-lg:   28px;
  --r-xl:   40px;
  --r-pill: 999px;

  /* --- Shadows --- */
  --shadow-soft:  0 6px 24px -8px rgba(50,50,44,0.18);
  --shadow-lift:  0 18px 48px -16px rgba(50,50,44,0.22);
  --shadow-press: 0 2px 0 rgba(0,0,0,0.10);
}