/* ============================================================
   CITADEL SHARED THEME
   Single source of truth for colors across the shell AND every
   tool page. No gradients, no animations — just 3 flat tones
   plus text/border shades derived from them.

   --c1  : app / page background (behind everything)
   --c2  : surface color for cards, panels, tables, inputs
   --c3  : accent color (buttons, links, active states)

   Every tool page must:
     1) <link rel="stylesheet" href="./theme.css">
     2) <script src="./theme.js"></script>
     3) use var(--c1) / var(--c2) / var(--c3) / var(--text) / etc.
        instead of hardcoded colors.
   ============================================================ */

:root{
  --c1:#eef1f7;
  --c2:#ffffff;
  --c3:#2aa7ff;

  /* derived automatically by theme.js based on --c1/--c2 brightness,
     these are just safe fallbacks if JS hasn't run yet */
  --text:#1c2230;
  --text-dim:rgba(28,34,48,.64);
  --text-faint:rgba(28,34,48,.42);
  --border:rgba(28,34,48,.10);
  --border-strong:rgba(28,34,48,.20);

  --ok-bg:#e3f8ec; --ok-txt:#146c44; --ok-bd:#9fe3bf;
  --bad-bg:#fdeaec; --bad-txt:#a3222c; --bad-bd:#f3b6bc;
  --exc-bg:#fff6df; --exc-txt:#8a6600; --exc-bd:#eeda9a;

  --radius:14px;
  --radius-sm:9px;
  --shadow:0 8px 24px rgba(20,30,50,0.08);

  /* Safe surface for anything that needs to sit apart from --c2 cards
     but still hold readable text (inputs, nav items, alt rows). It's
     always a blend TOWARD --c2, so the derived --text color (based on
     --c2) stays readable on it too — unlike raw --c1, which can be a
     totally different lightness family. */
  --surface-alt: color-mix(in srgb, var(--c2) 80%, var(--c1) 20%);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--c1);
  color:var(--text);
  transition: background-color .2s ease, color .2s ease;
}

::placeholder{ color:var(--text-faint); opacity:1; }

/* Generic building blocks every tool/shell can reuse as-is */
.theme-surface{
  background:var(--c2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.theme-accent{ color:var(--c3); }
.theme-accent-bg{ background:var(--c3); color:var(--text-on-accent); }

input, select, textarea, button{
  font-family:inherit;
}