/* ============================================================
   kf-theme.css — shared light/dark palette for all inner pages.
   Inspired by helpdesk.html's two themes (paper + dark).

   Pages opt in by:
     1. Including <link rel="stylesheet" href="/kf-theme.css">
     2. Including <script src="/kf-theme.js"></script>  (sets data-theme)
     3. Replacing their hard-coded colors with these vars where desired.

   NOT loaded on welcome.html or index.html — those keep their own design.
   ============================================================ */

/* ── Default (dark) ─────────────────────────────────────── */
:root, body[data-theme="dark"] {
  /* base surfaces */
  --kf-bg:        #161425;
  --kf-bg-2:      #1c1a30;
  --kf-bg-3:      #24223a;
  --kf-surface:   rgba(45, 42, 72, 0.45);

  /* borders */
  --kf-border:    rgba(107, 102, 148, 0.15);
  --kf-border-h:  rgba(107, 102, 148, 0.30);

  /* ink */
  --kf-text:      #d5d3e4;
  --kf-text-2:    #8985ab;
  --kf-text-3:    #5c5878;

  /* accent (lime) */
  --kf-accent:        #c4f53a;
  --kf-accent-soft:   rgba(196, 245, 58, 0.10);
  --kf-accent-glow:   rgba(196, 245, 58, 0.20);
  --kf-accent-ink:    #161425;  /* readable text on accent backgrounds */

  /* semantic */
  --kf-coral:     #ff7b72;  /* errors */
  --kf-sky:       #60c0f0;  /* info */
  --kf-sun:       #ffc042;  /* warnings */
  --kf-green:     #c4f53a;  /* success */

  /* status badges */
  --kf-status-open:     rgba(232, 230, 225, 0.85);
  --kf-status-pending:  #f59e42;
  --kf-status-success:  #c4f53a;
  --kf-status-info:     #60c0f0;

  /* shadow */
  --kf-shadow:    0 12px 40px rgba(0, 0, 0, 0.35);
}

/* ── Light (paper) ──────────────────────────────────────── */
body[data-theme="light"] {
  --kf-bg:        #fafaf7;
  --kf-bg-2:      #f3f3ef;
  --kf-bg-3:      #e8e8e3;
  --kf-surface:   rgba(255, 255, 255, 0.80);

  --kf-border:    #dedfd9;
  --kf-border-h:  #c8c9c2;

  --kf-text:      #1d1d1f;
  --kf-text-2:    #5b5b56;
  --kf-text-3:    #9b9b94;

  --kf-accent:        #ff5b1f;
  --kf-accent-soft:   rgba(255, 91, 31, 0.08);
  --kf-accent-glow:   rgba(255, 91, 31, 0.18);
  --kf-accent-ink:    #ffffff;

  --kf-coral:     #c41a0e;
  --kf-sky:       #1f7a3a;
  --kf-sun:       #a86a00;
  --kf-green:     #1f7a3a;

  --kf-status-open:     #5b5b56;
  --kf-status-pending:  #a86a00;
  --kf-status-success:  #1f7a3a;
  --kf-status-info:     #2d6cb8;

  --kf-shadow:    0 12px 40px rgba(8, 16, 28, 0.10);
}