/* ─── Color tokens ─────────────────────────────────────────────────────────── */
/* All UI colors live here. style.css references var(--c-*) throughout.        */
/* To change a theme, edit ONLY THIS FILE.                                     */

:root {
  /* Surfaces */
  --c-bg:      #f5f5f5;
  --c-surface: #ffffff;

  /* Text */
  --c-text:   #121212;
  --c-text-2: #555555;
  --c-text-3: #767676;
  --c-text-4: #aaaaaa;
  --c-text-5: #cccccc;

  /* Brand green */
  --c-green:        #295139;
  --c-green-soft:   rgba(41,81,57,.06);
  --c-green-hover:  rgba(41,81,57,.08);
  --c-green-bar:    rgba(41,81,57,.10);
  --c-green-border: rgba(41,81,57,.20);
  --c-green-spin:   rgba(41,81,57,.20);

  /* Brand purple */
  --c-purple:      #777da7;
  --c-purple-soft: rgba(119,125,167,.10);

  /* Red / danger */
  --c-red:       #d5573b;
  --c-red-hover: rgba(213,87,59,.08);

  /* Misc */
  --c-overlay:       rgba(245,245,245,.95);
  --c-tut-rule-bg:   #f5f5f5;
  --c-hint-match:    #c6ecae;
  --c-score-text:    #333333;
  --c-score-text-2:  #555555;
  --c-score-border:  #e0e0e0;

  /* Similarity tiers (0% → 100%, cold > hot) */
  --c-tier0: #101719;   /* 0–5%    */
  --c-tier1: #085076;   /* 6–25%   */
  --c-tier2: #277da1;   /* 26–45%  */
  --c-tier3: #f9c74f;   /* 46–60%  */
  --c-tier4: #f8961e;   /* 61–80%  */
  --c-tier5: #f5722c;   /* 81–95%  */
  --c-tier6: #ca2500;   /* 96–100% */

  /* Dark-mode toggle icon visibility */
  --icon-moon-display: inline;
  --icon-sun-display:  none;
}

[data-theme="dark"] {
  /* Surfaces */
  --c-bg:      #181818;
  --c-surface: #242424;

  /* Text */
  --c-text:   #e2e2e2;
  --c-text-2: #9e9e9e;
  --c-text-3: #848484;
  --c-text-4: #5a5a5a;
  --c-text-5: #383838;

  /* Brand green — lightened for dark-bg legibility */
  --c-green:        #57a876;
  --c-green-soft:   rgba(87,168,118,.09);
  --c-green-hover:  rgba(87,168,118,.14);
  --c-green-bar:    rgba(87,168,118,.16);
  --c-green-border: #000000;
  --c-green-spin:   rgba(87,168,118,.25);

  /* Brand purple */
  --c-purple:      #9498c5;
  --c-purple-soft: rgba(148,152,197,.15);

  /* Red / danger */
  --c-red:       #e07050;
  --c-red-hover: rgba(224,112,80,.12);

  /* Misc */
  --c-overlay:       rgba(24,24,24,.96);
  --c-tut-rule-bg:   #2c2c2c;
  --c-hint-match:    #224415;
  --c-score-text:    #c8c8c8;
  --c-score-text-2:  #909090;
  --c-score-border:  #3a3a3a;

  /* Similarity tiers for dark mode*/
  --c-tier0: #3d5c66;   /* 0–5%  */
  --c-tier1: #1a7ab0;   /* 6–25%  */
  --c-tier2: #3a9ec8;   /* 26–45%  */
  --c-tier3: #f9c74f;   /* 46–60% */
  --c-tier4: #f8961e;   /* 61–80% */
  --c-tier5: #f5722c;   /* 81–95% */
  --c-tier6: #e03500;   /* 96–100% */

  /* Dark-mode toggle icon visibility */
  --icon-moon-display: none;
  --icon-sun-display:  inline;
}

/* Toggle icon switching via CSS — no JS needed for the icon swap */
.icon-moon { display: var(--icon-moon-display); }
.icon-sun  { display: var(--icon-sun-display);  }