/* Mulch Practice — Loam (default) + Dusk (auto dark, `prefers-color-scheme`
   or `[data-theme="dusk"]`) design tokens.

   Single source of truth for the app's palette and shape scale. style.css
   @imports this; public pages that need the same colors (beta.html, etc.)
   can link it directly without pulling in any app UI classes. */

:root {
  /* ground */
  --mp-canvas:          #f4efe6;
  --mp-canvas-reflect:  #f0eee2; /* growth reflections + weekly learning surfaces only */
  --mp-surface:         #fffcf8;
  --mp-surface-sunk:    #efe8dc; /* sidebar, chips, secondary buttons */
  --mp-line:            #e2d9cc;

  /* ink */
  --mp-ink:             #2a2520; /* 13.3:1 on canvas */
  --mp-ink-soft:        #6b6156; /*  5.6:1 on canvas — replaces every #999/#aaa in the old sheet */
  --mp-ink-faint:       #8f8578; /* placeholder text only, never prose */

  /* accent — the only filled color for primary actions/nav */
  --mp-accent:          #4c6141;
  --mp-accent-ink:      #fffdf9; /* 6.8:1 on accent */
  --mp-accent-tint:     #e6ebdd;
  --mp-accent-tint-ink: #35462c; /* 7.9:1 on tint */

  /* clay — second, quieter earth tone: the mark's soil, the Weekly
     Learning surface (unstructured, in-your-own-words material), and
     anywhere "warm attention without alarm" is needed (word-count
     warnings, near-threshold states) */
  --mp-clay:            #9c5b3e;
  --mp-clay-ink:        #fffdf9; /* 5.4:1 on clay */
  --mp-clay-tint:       #f1e3da;
  --mp-clay-tint-ink:   #7a4530; /* 6.6:1 on tint */

  /* speech */
  --mp-user-bubble:     #ece3d2;
  --mp-user-ink:        #2a2520;

  /* status — errors/destructive actions only; unrelated to brand accents */
  --mp-danger:          #9c3b2c;
  --mp-danger-ink:      #fffdf9;
  --mp-danger-tint:     #f7e4df;
  --mp-danger-tint-ink: #7a2d20;

  /* weight — what makes the UI feel light instead of clunky */
  --mp-radius:          11px;
  --mp-radius-lg:       12px;
  --mp-shadow-card:     0 1px 2px rgba(42,37,32,.04);
  --mp-shadow-float:    0 10px 28px -14px rgba(42,37,32,.20);
  --mp-overlay:         rgba(42,37,32,.4); /* modal-overlay backdrop, warmed off pure black */
}

[data-theme="dusk"] {
  --mp-canvas:          #23211e;
  --mp-canvas-reflect:  #262420;
  --mp-surface:         #2c2926;
  --mp-surface-sunk:    #1f1d1a;
  --mp-line:            #3c3730;

  --mp-ink:             #ece6dc; /* 13.0:1 on canvas */
  --mp-ink-soft:        #a99f91; /*  6.1:1 on canvas */
  --mp-ink-faint:       #857c70;

  --mp-accent:          #a8c096;
  --mp-accent-ink:      #1d2318; /* 9.4:1 on accent */
  --mp-accent-tint:     #333c2d;
  --mp-accent-tint-ink: #c2d4b2; /* 7.1:1 on tint */

  --mp-clay:            #d1866a;
  --mp-clay-ink:        #23211e; /* ~6.0:1 on clay */
  --mp-clay-tint:       #3a2e28;
  --mp-clay-tint-ink:   #dba084; /* ~5.9:1 on tint */

  --mp-user-bubble:     #3a342e;
  --mp-user-ink:        #ece6dc;

  --mp-danger:          #e08a7a;
  --mp-danger-ink:      #23211e;
  --mp-danger-tint:     #3d2b27;
  --mp-danger-tint-ink: #f0b0a0;

  --mp-radius:          11px;
  --mp-radius-lg:       12px;
  --mp-shadow-card:     none;
  --mp-shadow-float:    0 14px 34px -16px rgba(0,0,0,.50);
  --mp-overlay:         rgba(0,0,0,.55);
}