/* ============================================================
   Munchkin — Color tokens
   Light is the default on :root. Dark theme via [data-theme="dark"]
   (single-selector scope) and prefers-color-scheme as a fallback.
   Flat fills only — no gradients anywhere in the system.
   ============================================================ */

:root {
  /* ---- Raw brand palette ---- */
  --jade-tint:  #E3F0EC;  /* section tints, hover backgrounds */
  --jade-soft:  #B4DBD1;  /* avatars, chips, secondary surfaces */
  --jade:       #4FA193;  /* primary brand, active states (dark text on it) */
  --jade-deep:  #2C6A5E;  /* primary buttons (white text), headings */
  --jade-ink:   #10403A;  /* AA-safe text directly on --jade */

  --peach:      #EFA985;  /* warmth, secondary CTA */
  --peach-ink:  #7A3D1E;

  --lav:        #CDBFEC;  /* optional sparing accent / "notes" tint */
  --lav-ink:    #4A3C7E;

  /* ---- Raw surface + ink (light) ---- */
  --paper:       #F4ECDA;  /* base / page */
  --paper-card:  #FCF8EF;  /* card surface */
  --paper-raised:#FFFFFF;  /* popovers, top sheets — sits above cards */
  --paper-edge:  #E8DBC0;  /* edges / dividers */
  --ink:         #322C3A;  /* primary text */
  --ink-soft:    #6E6678;  /* secondary text */

  /* ---- Raw status (muted fills + deep same-family ink) ---- */
  --ok:        #9DBE8F;  --ok-ink:      #33502A;  /* up to date  (check) */
  --due:       #E8C06B;  --due-ink:     #6F4E0F;  /* due soon    (clock) */
  --overdue:   #D2856E;  --overdue-ink: #6E3120;  /* overdue     (alert) */
  --ok-tint:   #E7EFDF;  --due-tint:    #F8EECF;  --overdue-tint: #F4DED4;

  /* ============================================================
     Semantic aliases — what components should reference
     ============================================================ */

  /* Brand */
  --brand:        var(--jade);
  --brand-strong: var(--jade-deep);
  --brand-soft:   var(--jade-soft);
  --brand-tint:   var(--jade-tint);
  --on-brand:        #FFFFFF;     /* text on --brand-strong buttons (AA) */
  --on-brand-tint:   var(--jade-ink);

  --accent:      var(--peach);
  --accent-ink:  var(--peach-ink);

  /* Surfaces */
  --surface-page:   var(--paper);
  --surface-card:   var(--paper-card);
  --surface-raised: var(--paper-raised);
  --surface-sunken: #EFE6D0;      /* wells, inset fields */
  --surface-tint:   var(--jade-tint);  /* selected rows, hover bg */

  /* Text */
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted:     #9A93A0;
  --text-inverse:   #FCF8EF;
  --text-link:      var(--jade-deep);

  /* Borders & lines */
  --border:        var(--paper-edge);
  --border-strong: #D8C8A6;
  --border-field:  #D6C7A8;

  /* Status — fills + ink + soft tints */
  --status-ok-bg:      var(--ok);      --status-ok-fg:      var(--ok-ink);      --status-ok-tint:      var(--ok-tint);
  --status-due-bg:     var(--due);     --status-due-fg:     var(--due-ink);     --status-due-tint:     var(--due-tint);
  --status-overdue-bg: var(--overdue); --status-overdue-fg: var(--overdue-ink); --status-overdue-tint: var(--overdue-tint);

  /* Interaction */
  --focus-ring:  #2C6A5E;
  --overlay-scrim: rgba(34, 31, 26, 0.42);

  /* Field placeholder & disabled */
  --field-bg:        #FFFFFF;
  --field-disabled:  #F0E8D6;
  --disabled-fg:     #B3AC9B;
}

/* ============================================================
   Dark theme — warm dark (cozy, not cold)
   ============================================================ */
:root[data-theme="dark"] {
  /* Warm charcoal — cozy, never black. Surfaces lift a visible step each. */
  --jade:       #74C9B8;   /* lifted accent — icons, links, tertiary */
  --jade-deep:  #6FC3B3;   /* primary button fill (with deep-charcoal ink) */
  --jade-soft:  #335E54;   /* soft jade surface — secondary btn, avatars, chips */
  --jade-tint:  #2E443D;   /* subtle jade surface — icon tiles, info banners */
  --jade-ink:   #D3F0E8;   /* LIGHT ink on the dark jade soft/tint surfaces */
  --peach:      #F2B493;
  --peach-ink:  #FBE2D3;   /* light ink on dark peach surfaces */
  --lav:        #3A345C;   /* optional lavender surface (sparing) */
  --lav-ink:    #D7CBF2;

  --paper:       #2A2622;  /* base / page — warm charcoal */
  --paper-card:  #34302A;  /* card — a clear step above base */
  --paper-raised:#3D382F;  /* elevated / hover */
  --paper-edge:  #4A4338;  /* edge / divider */
  --ink:         #F2EBDB;  /* cream text */
  --ink-soft:    #B9AE9B;  /* cream-soft */

  --on-brand:       #16201D;          /* deep-charcoal ink on the lifted jade button */
  --on-brand-tint:  #E3F4EF;

  --surface-sunken: #211E1A;
  --surface-tint:   #323E38;          /* hover / selected wash on cards */

  --text-muted:   #8E8675;
  --text-inverse: #2A2622;
  --text-link:    #82D2C3;

  --border:        #4A4338;
  --border-strong: #5A5346;
  --border-field:  #534B3D;

  /* Status — subtle dark fill + bright same-hue text & icon (never dark-on-dark) */
  --status-ok-bg:      #3A4833;  --status-ok-fg:      #A9CF98;  --status-ok-tint:      #2F3A2A;
  --status-due-bg:     #4A4026;  --status-due-fg:     #F0CE84;  --status-due-tint:     #3B3320;
  --status-overdue-bg: #4A2F29;  --status-overdue-fg: #EFA488;  --status-overdue-tint: #3B2622;

  --focus-ring:  #82D2C3;
  --overlay-scrim: rgba(12, 10, 8, 0.6);

  --field-bg:       #2C2823;
  --field-disabled: #2E2A24;
  --disabled-fg:    #756D5C;
}
/* Theme is explicit via [data-theme="dark"]. Set it on <html> (the UI kits
   do this through the theme switch). Default — with no attribute — is light. */