/* =========================================================
   Toolkit Studio — SITE COLORS (single source of truth)
   ---------------------------------------------------------
   Every color used anywhere on the site — home page, header,
   and all three tools — is defined ONCE here. Change a value
   below and it updates everywhere that references it.

   This file is linked from every page:
     - index.html               -> assets/colors.css
     - tools/*.html              -> ../assets/colors.css

   Each page keeps its own local variable names (e.g. a tool
   might call the accent color "--lime" or "--green") but those
   local names simply point at the colors defined here, so nothing
   else in any tool had to change.
   ========================================================= */

:root{

  /* ---------- Backgrounds ---------- */
  --color-bg:         #f6f8fc;  /* page background */
  --color-bg-alt:     #eef2f9;  /* slightly deeper page background */
  --color-surface:    #ffffff;  /* cards, panels, header/footer, inputs */
  --color-surface-2:  #f1f5f9;  /* secondary surface (hover fills, chips) */

  /* ---------- Text ---------- */
  --color-text:        #0f172a; /* primary text */
  --color-text-muted:  #5b6577; /* secondary text */
  --color-text-faint:  #97a1b3; /* tertiary / faint text */

  /* ---------- Lines / borders ---------- */
  --color-line:       #e2e8f3;
  --color-line-soft:  #edf1f9;

  /* ---------- Brand accent (blue) ---------- */
  --color-accent:         #2563eb;  /* the one accent color for the whole site */
  --color-accent-dark:    #1d4ed8;
  --color-accent-darker:  #1e40af;
  --color-accent-light:   #93b4f5;
  --color-accent-ink:     #ffffff; /* text/icons placed on top of the accent color */
  --color-accent-soft:    rgba(37, 99, 235, 0.10); /* faint accent tint (badges, highlights) */
  --color-accent-glow:    rgba(37, 99, 235, 0.14); /* slightly stronger accent tint */

  /* ---------- Status colors ---------- */
  --color-cyan:    #0891b2;
  --color-amber:   #d97706;
  --color-danger:  #dc2626;
  --color-ok:      #16a34a;

}