:root {
  /* --- Base palette --- */
  --ink: #211E19;            /* primary text */
  --muted: #6E6250;          /* muted text */
  --teal: #0E7A6C;           /* primary accent: buttons, links, active */
  --teal-bright: #2DD4BF;    /* bright highlight: glows, route lines, emphasis */
  --clay: #C1673D;           /* WARNINGS ONLY — warm = caution */
  --white: #FFFFFF;          /* card surface */
  --hairline: #E0D4B0;       /* borders */

  /* Background system */
  --champagne: #F0E7CC;      /* gradient top */
  --sand: #E8DABB;           /* gradient bottom */
  --cream-glow: #F7EED6;     /* soft radial spotlight */
  --taupe: #E3D4B2;          /* footer bands */

  /* Tints (derived, low-opacity washes) */
  --teal-wash: #E4F1EE;      /* selected chip fill */
  --teal-tint: rgba(14, 122, 108, 0.08);
  --clay-wash: #F6E7DE;      /* warning box background */
  --clay-tint: rgba(193, 103, 61, 0.10);

  /* --- Semantic aliases --- */
  --text-primary: var(--ink);
  --text-muted: var(--muted);
  --text-on-accent: var(--white);
  --text-link: var(--teal);

  --color-accent: var(--teal);
  --color-accent-hover: #0B6558;
  --color-accent-active: #094e44;
  --color-highlight: var(--teal-bright);
  --color-warning: var(--clay);
  --color-warning-hover: #A9542E;

  --surface-card: var(--white);
  --surface-app: var(--champagne);
  --surface-footer: var(--taupe);
  --surface-selected: var(--teal-wash);

  --border-hairline: var(--hairline);
  --border-accent: var(--teal);

  /* Layered app background: radial cream glow over champagne→sand gradient */
  --bg-app:
    radial-gradient(60% 45% at 50% 12%, var(--cream-glow) 0%, rgba(247,238,214,0) 70%),
    linear-gradient(180deg, var(--champagne) 0%, var(--sand) 100%);
}