/* ============================================================================
   KANJO — CONTRAST-SAFE TOKENS  (drop-in, single file)
   Point the app at THIS file. Every surface/brand color ships with the ONE
   text color proven readable on it (--on-*). Rule: if you set a background,
   use its matching --on-* for text. Never pick a text color by hand.
   Contrast checked against WCAG 2.1 (AA body ≥4.5, AA-large ≥3.0).
   ============================================================================ */
:root {
  /* ---- BRAND ---- */
  --violet:        #6C2A88;  --on-violet:        #FFFFFF;  /* 6.4  AA   */
  --violet-bright: #9B4FBE;  --on-violet-bright: #2C1038;  /* 3.4  AA-lg — LIGHT violet wants DARK text */
  --violet-deep:   #4E1D63;  --on-violet-deep:   #FFFFFF;  /* 9.1  AA   */
  --violet-ink:    #2C1038;
  --orange:        #EE5A2B;  --on-orange:        #FFFFFF;  /* 5.7  AA   */

  /* ---- SURFACES (dark theme) ---- */
  --canvas:    #0E1015;  --on-canvas:    #F4F1F6;  /* 12.3 AA */
  --raised:    #171A21;  --on-raised:    #F4F1F6;  /*  7.9 AA */
  --raised-2:  #1F2430;  --on-raised-2:  #F4F1F6;  /*  5.5 AA */
  --sunken:    #0A0C10;  --on-sunken:    #F4F1F6;

  /* ---- SURFACE (light theme / reports / print) ---- */
  --paper:     #F7F3F0;  --on-paper:     #2C1038;  /* 12+ AA — DARK text on light paper */

  /* ---- TEXT ROLES on dark canvas (fixed hex, NOT alpha — alpha wrecks contrast) ---- */
  --text:        #F4F1F6;  /* primary   — 12.3 AA */
  --text-muted:  #A8A6AD;  /* secondary —  6.6 AA */
  --text-faint:  #7E7C84;  /* tertiary  —  3.6 AA-lg · labels/large only, never body */

  /* ---- TEXT ROLES on paper ---- */
  --text-on-paper:       #2C1038;
  --text-on-paper-muted: #6E6478;

  /* ---- HAIRLINES ---- */
  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --line-paper:  #EAE3DC;

  /* ---- MONEY SEMANTICS (color = meaning, never decoration) ---- */
  --profit:        #2FA36B;  --on-profit: #FFFFFF;   /* use for badges/bold, not tiny text */
  --profit-bright: #3DBE7E;                          /* profit TEXT on dark surfaces */
  --profit-soft:   rgba(61,190,126,.16);             /* profit chip bg on dark; text = --profit-bright */
  --cost:          #E5544B;  --on-cost:   #FFFFFF;
  --cost-bright:   #F06A61;                          /* cost TEXT on dark surfaces */
  --cost-soft:     rgba(240,106,97,.15);             /* cost chip bg; text = --cost-bright */
  --warning:       #E0962F;  --on-warning: #2C1038;  /* AMBER wants DARK text — 6.0 AA */
  --warning-soft:  rgba(224,150,47,.18);             /* text = --warning */

  /* ---- CHART SERIES (categorical — walk the family) ---- */
  --series-1: #9B4FBE;  --series-2: #2FA3A3;  --series-3: #E0962F;
  --series-4: #C2557E;  --series-5: #5566C9;  --series-6: #3DBE7E;
  --chart-grid:  rgba(255,255,255,.08);
  --chart-gain:  #3DBE7E;  --chart-loss: #F06A61;  --chart-flat: #7E7C84;
  --gauge-good:  #2FA36B;  --gauge-warn: #E0962F;  --gauge-bad:  #E5544B;

  /* ---- SPACING (4px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px;

  /* ---- RADII ---- */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;

  /* ---- SHADOW ---- */
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.36);
  --shadow-pop:  0 18px 44px rgba(0,0,0,.5);
  --glow-violet: 0 12px 30px rgba(108,42,136,.45);

  /* ---- TYPE ---- */
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-numeric: 'Space Grotesk', ui-monospace, 'SF Mono', monospace;
}

/* ============================================================================
   UTILITY CLASSES — these set background AND text together, so they can never
   drift apart. PREFER THESE over raw var() when building surfaces & buttons.
   ============================================================================ */
.kj-canvas   { background: var(--canvas);   color: var(--on-canvas); }
.kj-raised   { background: var(--raised);   color: var(--on-raised); }
.kj-raised-2 { background: var(--raised-2); color: var(--on-raised-2); }
.kj-paper    { background: var(--paper);    color: var(--on-paper); }

.kj-btn-primary { background: var(--violet);       color: var(--on-violet);       border: 0; }
.kj-btn-accent  { background: var(--orange);       color: var(--on-orange);       border: 0; }
.kj-btn-profit  { background: var(--profit);       color: var(--on-profit);       border: 0; }

/* Money chips: soft translucent bg + matching bright text (both on dark surfaces) */
.kj-chip-profit  { background: var(--profit-soft);  color: var(--profit-bright); }
.kj-chip-cost    { background: var(--cost-soft);    color: var(--cost-bright); }
.kj-chip-warning { background: var(--warning-soft); color: var(--warning); }

/* Text roles */
.kj-text       { color: var(--text); }
.kj-text-muted { color: var(--text-muted); }
.kj-text-faint { color: var(--text-faint); }
.kj-figure     { font-family: var(--font-numeric); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Signed money text — always readable on dark surfaces */
.kj-gain { color: var(--profit-bright); }
.kj-loss { color: var(--cost-bright); }