/* Design tokens.
   The brand family is leather brown rather than the system's original green;
   every accent keeps exactly one meaning and is never used decoratively. */
:root {
  /* Brand — leather / saddle browns */
  --brown-100: #F6EDE1;   /* tinted surfaces, banner fills */
  --brown-200: #EBD7BC;   /* highlight */
  --brown-400: #C8894B;   /* hover / light rim */
  --brown-500: #A9642F;   /* PRIMARY: buttons, header, active states */
  --brown-600: #8A4E22;   /* button underside, pressed */
  --brown-700: #5E3315;   /* deepest brown */

  /* Environment */
  --canvas:     #FBF6EE;
  --steppe:     #D9C48A;
  --trail:      #EFDDB0;
  --trail-edge: #DCC48C;

  /* Semantic accents — one meaning each */
  --heart: #FF4B4B;   /* health */
  --flame: #FF9A00;   /* streak */
  --gem:   #21B5F0;   /* currency */
  --gold:  #FFC42E;   /* stars, XP, boss node */
  --chest: #C8783C;   /* treasure */
  --ok:    #4CB93E;   /* correct answer */
  --ok-100:#E9F8DC;
  --ok-700:#2C6E24;
  --bad-100:#FFE9E9;

  /* Neutrals */
  --ink:      #3B322A;
  --ink-soft: #7A6A5B;
  --ink-mute: #B3A493;
  --line:     #E8DDCD;
  --surface:  #FFFFFF;
  --locked:   #DED3C4;
  --locked-shadow: #C4B7A5;

  /* Shape */
  --r-tile: 12px;
  --r-card: 16px;
  --r-sheet: 24px;
  --r-btn: 16px;
  --r-pill: 999px;

  /* 4pt grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  --underside: 4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:  #1E1811;
    --surface: #2A231A;
    --ink:      #F6EFE4;
    --ink-soft: #C6B7A5;
    --ink-mute: #8B7C6B;
    --line:     #43372A;
    --brown-100:#3A2C1E;
    --locked:   #3A3128;
    --locked-shadow: #2A231C;
    --ok-100:  #24331B;
    --bad-100: #3A2020;
  }
}