/* Kanjo COGS & Cashflow — design-system tokens.

   LIGHT (default) = Google Material (owner request 2026-07-03): white cards on
   a Google-grey canvas + Google-blue accent.
   DARK (.kanjo-dark) = the kanjo-styling-fix contrast-safe system (owner
   request 2026-07-05): every dark value below is copied VERBATIM from
   styles/kanjo-tokens.css (loaded first — the source of truth) and named with
   its origin token. test/contrast.test.js asserts the copies stay in sync AND
   that every pair clears WCAG AA. Literal hex (not var()) on purpose: the
   contrast test parses flat colors, and var() aliases would silently drop the
   dark theme out of enforcement.

   Contrast enforced for BOTH themes: body ink ≥4.5:1 on its surface, valence
   accents ≥3:1, banner text ≥4.5:1.

   Type: Plus Jakarta Sans (UI/display) + Space Grotesk (tabular numerals). */

/* Fonts are self-hosted and linked from index.html as styles/fonts.css.
   The @import that used to live here fetched fonts.googleapis.com only
   AFTER this sheet had been parsed — a serialized round trip to a third
   origin on the critical path, and a hard failure offline. */

:root {
  /* Canvas + surfaces — Google Material 3 light: white cards on a grey canvas */
  --bg:        #F8F9FA;   /* Google grey 50 — app background */
  --surface:   #FFFFFF;   /* white raised card */
  --surface-2: #F1F3F4;   /* Google grey 100 — secondary card, inset field fill */
  --surface-3: #E8EAED;   /* Google grey 200 — segmented track, neutral chip, ghost btn */

  /* Ink — dark text (canvas AND cards are light, so all text is dark) */
  --ink:       #1F1F1F;   /* Google grey 900 — ~16:1 on white */
  --ink-2:     #444746;   /* Google grey 700 — ~8.9:1 on white */
  --ink-3:     #5F6368;   /* Google grey 600 — ~5.8:1 on white (labels/captions) */
  --ink-4:     #9AA0A6;

  /* Rules */
  --rule:      #DADCE0;   /* Google grey 300 hairline */
  --rule-2:    #C4C7CC;

  /* Accents — Google blue + money semantics */
  --brand:         #1967D2;                    /* Google blue 700 — ~4.9:1 as text on white */
  --brand-soft:    rgba(26, 115, 232, 0.10);   /* tint for chips on white cards */
  --brand-bg:      #E8F0FE;                     /* Google blue 50 info-banner fill */
  --positive:      #1E8E3E;                    /* Google green 700 — profit, ~4.6:1 on white */
  --positive-ink:  #137333;                    /* Google green 800 — valence TEXT on white (AA) */
  --positive-soft: rgba(30, 142, 62, 0.14);    /* tint on white cards */
  --positive-bg:   #E6F4EA;                     /* Google green 50 success fill */
  --warning:       #B06000;                    /* darkened amber — ~4.8:1 text/accent on white */
  --warning-soft:  rgba(249, 171, 0, 0.18);    /* tint on white cards */
  --warning-bg:    #FEF7E0;                     /* Google yellow 50 warning fill (--ink text reads) */
  --danger:        #B3261E;                    /* Material error red — ~6.2:1 text on white */
  --danger-soft:   rgba(217, 48, 37, 0.12);    /* tint on white cards */
  --danger-bg:     #FCE8E6;                     /* Google red 50 error fill (--danger text ≈5.4:1) */

  /* Button/CTA FILLS — paired: set --brand-fill as a background ONLY with
     --on-brand-fill as its text (same for positive). Never white on --warning
     or on --brand (light violet in dark mode) — those hues need pairing. */
  --brand-fill:        #1967D2;  --on-brand-fill:    #FFFFFF;  /* 5.4 AA */
  --positive-fill:     #1E8E3E;  --on-positive-fill: #FFFFFF;  /* 4.2 AA-lg (bold CTAs) */
  --danger-fill:       #B3261E;  --on-danger-fill:   #FFFFFF;  /* 6.5 AA */

  /* Chart series (categorical) — the kanjo-tokens family re-cut for WHITE
     cards: same six hues, darkened so each clears 3:1 against --surface. Used
     for time-grouped bars (a month's weeks share a hue), never for valence —
     gains/losses stay --positive / --danger. */
  --series-1:  #8430AA;   /* violet   — 7.6:1 on white */
  --series-2:  #00796B;   /* teal     — 4.7:1 */
  --series-3:  #B06000;   /* amber    — 4.8:1 (= --warning) */
  --series-4:  #AD1457;   /* rose     — 7.3:1 */
  --series-5:  #3949AB;   /* indigo   — 7.4:1 */
  --series-6:  #1E8E3E;   /* green    — 4.6:1 (= --positive) */

  --card-2:    #F1F3F4;
  --clay:      #1967D2;   /* legacy alias → brand blue */
  --olive:     #1E8E3E;
  --mustard:   #B06000;
  --hole:      #E8EAED;

  /* Canvas text — light canvas, so these are DARK (mirror the ink ramp) */
  --on:      #1F1F1F;
  --on-soft: #444746;
  --on-dim:  #5F6368;

  /* Type — Plus Jakarta Sans for UI, Space Grotesk for numerals */
  --serif: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:  'Space Grotesk', ui-monospace, 'SF Mono', monospace;

  /* Radii */
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 18px;   /* cards */
  --r-xl: 20px;

  /* Card padding ladder (owned by component layout — unchanged) */
  --card-pad-hero: 22px;
  --card-pad-tile: 14px;
  --card-pad-list: 0;
  --card-pad-row:  16px;

  --focus-ring: 0 0 0 3px rgba(26, 115, 232, 0.32);

  /* Material elevation — soft neutral-grey shadow (Google grey #3C4043) */
  --shadow-card: 0 1px 2px rgba(60,64,67,0.10),
                 0 1px 3px 1px rgba(60,64,67,0.06);
  --shadow-pop:  0 4px 8px 3px rgba(60,64,67,0.14),
                 0 1px 3px rgba(60,64,67,0.10);
}

/* Dark mode — the kanjo-styling-fix contrast-safe system (owner request
   2026-07-05, replacing the M3 dark palette of 2026-07-03). Every value is a
   verbatim copy of a token in styles/kanjo-tokens.css — named in the comment —
   so background and text can never drift apart. A sync test in
   test/contrast.test.js fails the build if a copy diverges from its source.
   Ratios below are against the surface each role actually renders on. */
.kanjo-dark {
  --bg:        #0E1015;   /* --canvas — app background */
  --surface:   #171A21;   /* --raised — cards / tiles */
  --surface-2: #0A0C10;   /* --sunken — inset field fill */
  --surface-3: #1F2430;   /* --raised-2 — segmented track / neutral chip */

  --ink:       #F4F1F6;   /* --text / --on-raised — 15.6:1 on surface */
  --ink-2:     #A8A6AD;   /* --text-muted — 7.2:1 on surface */
  --ink-3:     #7E7C84;   /* --text-faint — 4.2:1 on surface (labels/large only) */
  --ink-4:     #7E7C84;   /* --text-faint (no darker step exists in the system) */

  --rule:      rgba(255,255,255,0.09);   /* --line */
  --rule-2:    rgba(255,255,255,0.16);   /* --line-strong */

  --brand:         #9B4FBE;                      /* --violet-bright — accent text/series-1, 3.5:1 on surface */
  --brand-soft:    rgba(155, 79, 190, 0.20);     /* derived violet tint (system has no violet-soft) */
  --brand-bg:      #4E1D63;                      /* --violet-deep — opaque info-banner fill (ink 11.2:1) */
  --positive:      #3DBE7E;                      /* --profit-bright — profit TEXT on dark, 7.4:1 */
  --positive-ink:  #3DBE7E;                      /* --profit-bright */
  --positive-soft: rgba(61, 190, 126, 0.16);     /* --profit-soft */
  --positive-bg:   #13271D;                      /* opaque success fill (app-owned; ink 14.1, ink-2 6.5) */
  --warning:       #E0962F;                      /* --warning — amber, 7.1:1 on surface; DARK text if filled */
  --warning-soft:  rgba(224, 150, 47, 0.18);     /* --warning-soft */
  --warning-bg:    #2A2314;                      /* opaque warning fill (app-owned; ink 13.9) */
  --danger:        #F06A61;                      /* --cost-bright — cost TEXT on dark, 5.8:1 */
  --danger-soft:   rgba(240, 106, 97, 0.15);     /* --cost-soft */
  --danger-bg:     #2A1513;                      /* opaque error fill (app-owned; danger 5.7) */

  /* CTA fills — the system's .kj-btn pairings: violet + white, profit + white */
  --brand-fill:        #6C2A88;  --on-brand-fill:    #FFFFFF;  /* --violet + --on-violet, 9.0 AA */
  --positive-fill:     #2FA36B;  --on-positive-fill: #FFFFFF;  /* --profit + --on-profit, 3.2 AA-lg (bold CTAs) */
  --danger-fill:       #E5544B;  --on-danger-fill:   #FFFFFF;  /* --cost + --on-cost, 3.7 AA-lg (bold CTAs) */

  /* Chart series (categorical) — verbatim copies of the kanjo-tokens family. */
  --series-1:  #9B4FBE;   /* --series-1 — 3.4:1 on surface */
  --series-2:  #2FA3A3;   /* --series-2 — 5.7:1 */
  --series-3:  #E0962F;   /* --series-3 — 7.1:1 */
  --series-4:  #C2557E;   /* --series-4 — 4.0:1 */
  --series-5:  #5566C9;   /* --series-5 — 3.4:1 */
  --series-6:  #3DBE7E;   /* --series-6 — 7.4:1 */

  --card-2:    #171A21;   /* --raised */
  --clay:      #9B4FBE;   /* --violet-bright */
  --olive:     #3DBE7E;   /* --profit-bright */
  --mustard:   #E0962F;   /* --warning */
  --hole:      #1F2430;   /* --raised-2 */

  --on:      #F4F1F6;     /* --on-canvas */
  --on-soft: #A8A6AD;     /* --text-muted — 7.9:1 on canvas */
  --on-dim:  #7E7C84;     /* --text-faint — 4.6:1 on canvas */

  --focus-ring: 0 0 0 3px rgba(155, 79, 190, 0.45);
  --shadow-card: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.36);  /* system --shadow-card */
  --shadow-pop:  0 18px 44px rgba(0,0,0,.5);                                        /* system --shadow-pop */
}

.kanjo, .kanjo * { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
.kanjo {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--on);                 /* canvas text (dark on the light paper) */
  background-color: var(--bg);
  /* warm paper with a faint violet + profit-green wash */
  background-image:
    radial-gradient(1100px 640px at 84% -12%, rgba(108, 42, 136, 0.07), transparent 60%),
    radial-gradient(820px 560px at -6% 6%, rgba(47, 163, 107, 0.06), transparent 55%);
  background-attachment: fixed;
}

/* Metadata / labels = uppercase eyebrows */
.kanjo .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.kanjo .label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--on-dim);
  text-transform: uppercase;
}
.kanjo .card .label { color: var(--ink-3); }
.kanjo .hair { background: var(--rule); height: 1px; }

/* Cards — white surface, hairline border, soft paper shadow. */
.kanjo .card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

/* Pills */
.kanjo .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 7px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1;
}
.kanjo .pill .dot { width: 6px; height: 6px; border-radius: 6px; }
.kanjo .pill.brand    { background: var(--brand-soft);    color: var(--brand); }
.kanjo .pill.positive { background: var(--positive-soft); color: var(--positive-ink); }
.kanjo .pill.warning  { background: var(--warning-soft);  color: var(--warning); }
.kanjo .pill.danger   { background: var(--danger-soft);   color: var(--danger); }
.kanjo .pill.neutral  { background: var(--surface-3);     color: var(--ink-2); }

/* Buttons — stadium pills; primary is the violet brand */
.kanjo .btn {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 14px 18px;
  border-radius: 999px;
  border: none;
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}
.kanjo .btn.primary { background: var(--brand-fill); color: var(--on-brand-fill); }
.kanjo .btn.ghost   { background: var(--surface-3); color: var(--ink); }
.kanjo .btn.brand   { background: var(--brand-fill); color: var(--on-brand-fill); }
.kanjo .btn.lg { padding: 16px 22px; font-size: 16px; }

/* Big number figure — Space Grotesk tabular numerals */
.kanjo .figure {
  font-family: var(--mono);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--on);
}
.kanjo .figure .currency { font-size: 0.5em;  vertical-align: 0.22em; color: var(--on-soft); margin-right: 2px; }
.kanjo .figure .cents    { font-size: 0.46em; vertical-align: 0.5em;  color: var(--on-soft); }
.kanjo .card .figure { color: var(--ink); }
.kanjo .card .figure .currency, .kanjo .card .figure .cents { color: var(--ink-3); }
.kanjo .figure.xl { font-size: 54px; }
.kanjo .figure.xl.sm-zero { font-size: 34px; }
.kanjo .figure.suffix { margin-left: 6px; font-size: 0.42em; color: var(--ink-3); vertical-align: 0.5em; font-family: var(--sans); font-weight: 600; }

/* Keyboard focus ring. */
.kanjo *:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 8px;
}

/* Subtle list row */
.kanjo .row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.kanjo .row + .row { border-top: 1px solid var(--rule); }

/* Spark + chart utilities */
.kanjo svg.spark { display: block; overflow: visible; }