/* ============================================================
   FitPanel — color tokens
   Themes: :root = light, [data-theme="dark"] = dark
   Skins:  [data-skin="terracotta"|"sage"|"ocean"|"berry"] override --brand-*
           (default = terracotta)
   ============================================================ */

:root {
  /* --- warm neutrals (base) --- */
  --sand-0:  #FBFAF8;
  --sand-1:  #F4F2EE;
  --sand-2:  #E7E3DD;
  --sand-3:  #D4CEC5;
  --stone-1: #2B2622;
  --stone-2: #6E655C;
  --stone-3: #9C928A;

  /* --- brand (default skin: terracotta) --- */
  --brand:        #D65A31;
  --brand-strong: #B8431F;   /* hover / press */
  --brand-soft:   #F7D8C8;   /* tint fills */
  --brand-wash:   #FAEBE1;   /* faintest tint (selected rows, washes) */
  --on-brand:     #FFF6F0;

  /* --- fixed pastel accents (not skinned; category colors) --- */
  --pastel-peach:  #FFD2AE;
  --pastel-sage:   #DCE8D2;
  --pastel-butter: #F6E7B8;
  --pastel-sky:    #D7E5EB;
  --pastel-rose:   #F3DBD8;
  --on-pastel:     #453B33;

  /* --- semantic --- */
  --success:      #4E9B6B;
  --success-soft: #DFF0E4;
  --warning:      #C08329;
  --warning-soft: #F8ECD2;
  --danger:       #C7554A;
  --danger-soft:  #F8DFDC;
  --info:         #4E7FA6;
  --info-soft:    #DEEAF2;

  /* --- semantic surface / text aliases --- */
  --bg-app:         var(--sand-0);
  --surface-card:   #FFFFFF;
  --surface-sunken: var(--sand-1);
  --surface-raised: #FFFFFF;
  --border:         var(--sand-2);
  --border-strong:  var(--sand-3);
  --text-1:         var(--stone-1);
  --text-2:         var(--stone-2);
  --text-3:         var(--stone-3);
  --text-body:      var(--stone-1);
  --overlay:        rgba(43, 38, 34, 0.45);
}

/* ---------- dark theme ---------- */
[data-theme="dark"] {
  --sand-0:  #201C19;
  --sand-1:  #28231F;
  --sand-2:  #443E37;
  --sand-3:  #595047;
  --stone-1: #F2EDE6;
  --stone-2: #C2BBB1;
  --stone-3: #968E84;

  --brand:        #ED7A4E;
  --brand-strong: #F4936C;
  --brand-soft:   #522A18;
  --brand-wash:   #371E12;
  --on-brand:     #2A1207;

  --pastel-peach:  #543C1F;
  --pastel-sage:   #35402C;
  --pastel-butter: #4A4026;
  --pastel-sky:    #2C3E47;
  --pastel-rose:   #472F2C;
  --on-pastel:     #EFE7DE;

  --success:      #6CB98A;
  --success-soft: #24352A;
  --warning:      #D9A052;
  --warning-soft: #3B2F1B;
  --danger:       #DB7A6F;
  --danger-soft:  #402522;
  --info:         #7AA6C7;
  --info-soft:    #24313C;

  --bg-app:         var(--sand-0);
  --surface-card:   #2E2924;
  --surface-sunken: #171412;
  --surface-raised: #39332C;
  --border:         var(--sand-2);
  --border-strong:  var(--sand-3);
  --text-1:         var(--stone-1);
  --text-2:         var(--stone-2);
  --text-3:         var(--stone-3);
  --text-body:      var(--stone-1);
  --overlay:        rgba(0, 0, 0, 0.55);
}

/* ---------- skins (brand overrides; light) ---------- */
[data-skin="sage"] {
  --brand: #7C9A6B; --brand-strong: #67875A;
  --brand-soft: #E2EBD8; --brand-wash: #F1F6EC; --on-brand: #F8FBF4;
}
[data-skin="ocean"] {
  --brand: #5C92A6; --brand-strong: #4B7E92;
  --brand-soft: #DBEAEF; --brand-wash: #EEF5F7; --on-brand: #F5FAFC;
}
[data-skin="berry"] {
  --brand: #A16483; --brand-strong: #8C5370;
  --brand-soft: #F0DEE8; --brand-wash: #F8F0F4; --on-brand: #FCF6F9;
}

/* ---------- skins × dark ---------- */
[data-theme="dark"][data-skin="sage"] {
  --brand: #93B37F; --brand-strong: #A9C797;
  --brand-soft: #33402A; --brand-wash: #262E20; --on-brand: #16200F;
}
[data-theme="dark"][data-skin="ocean"] {
  --brand: #7BADC1; --brand-strong: #94C2D4;
  --brand-soft: #253C46; --brand-wash: #1D2C33; --on-brand: #0E2129;
}
[data-theme="dark"][data-skin="berry"] {
  --brand: #C288A6; --brand-strong: #D3A0BC;
  --brand-soft: #422B37; --brand-wash: #302028; --on-brand: #26101B;
}