/* Stepwell Financial platform: design tokens, v0.2 "dark first".
   PRIVATE PROTOTYPE TOKENS, NOT IN FORCE ON ANY LIVE SITE.
   Core tokens (ink, muted, paper, panel, ledger, on-ledger, growth, compare,
   contrib) are identity.md values, unchanged (guidelines 1.0.6). Everything
   else is a proposed app addition. Direction approved 2026-10-28: futuristic
   fintech, so dark is the default; Paper is the light option.
   Contrast: WCAG 2 formula, 2026-10-28. Dark ratios are the worst case: text
   on a glass panel over the brightest glow (#111c18). */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  /* Core, identity.md dark column */
  --ink: #e8eeea;          /* 14.84:1 worst case */
  --muted: #9aa8a0;        /* 7.05:1 */
  --paper: #0f1412;
  --panel: #171e1b;
  --ledger: #3ccf8e;       /* 8.73:1; links, primary, focus, compounding */
  --on-ledger: #06140d;
  --growth: #3ccf8e;
  --compare: #fb923c;      /* comparisons only: this month vs last */
  --contrib: #7f9a8c;      /* money put in */

  /* App surfaces (proposed) */
  --void: #0a0f0d;                         /* app canvas behind the glass */
  --glass: rgba(17, 25, 22, .80);          /* panels; text contrast holds at this opacity */
  --glass-strong: rgba(20, 29, 25, .92);   /* menus, sheets, the rail */
  --glass-edge: rgba(232, 238, 234, .08);  /* 1px panel border */
  --glass-hi: rgba(232, 238, 234, .05);    /* top inner highlight */
  --panel-2: #17211d;
  --line: rgba(232, 238, 234, .09);
  --grid: rgba(232, 238, 234, .06);        /* chart gridlines */
  --ledger-tint: rgba(60, 207, 142, .12);
  --focus: #3ccf8e;
  --blur: 18px;

  /* Glow (proposed). Never on the wordmark (identity.md), never behind text. */
  --glow-ledger: 0 0 0 1px rgba(60,207,142,.35), 0 0 24px rgba(60,207,142,.28);
  --glow-soft: 0 0 32px rgba(60,207,142,.14);
  --aurora: radial-gradient(60% 50% at 18% 0%, rgba(60,207,142,.14), transparent 70%),
            radial-gradient(45% 40% at 92% 8%, rgba(60,207,142,.08), transparent 70%); /* ledger only, max 14% (A-I2) */

  /* Categories (proposed): "water and stone". All >= 6.3:1 worst case. */
  --cat-cash: #5cc8c2;      /* well water   8.72:1 */
  --cat-invest: #a993ff;    /* iris         6.90:1 */
  --cat-property: #d4bf8e;  /* sandstone    9.68:1 */
  --cat-other: #93a7b8;     /* slate        7.03:1 */
  --debt-card: #ec9cc6;     /* dusk rose    8.43:1 */
  --debt-loan: #c28bb0;     /* dusk mauve   6.33:1 */
  /* Debts are one "dusk" family, drawn hatched below zero: never red. */

  --shadow: 0 1px 0 var(--glass-hi) inset, 0 12px 40px rgba(0,0,0,.45);
}

/* Paper: the light option. identity.md light column. */
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #17201b; --muted: #5b665f; --paper: #f7f8f6; --panel: #ffffff;
  --ledger: #0f5132; --on-ledger: #ffffff; --growth: #1f8a5b; --compare: #c2410c; --contrib: #6f8a7d;
  --void: #eef1ee; --glass: rgba(255,255,255,.86); --glass-strong: rgba(255,255,255,.95);
  --glass-edge: rgba(23,32,27,.10); --glass-hi: rgba(255,255,255,.6);
  --panel-2: #eef2ef; --line: #d9dfdb; --grid: #e6ebe8; --ledger-tint: #e4efe8; --focus: #0f5132;
  --glow-ledger: 0 0 0 1px rgba(15,81,50,.25), 0 6px 18px rgba(15,81,50,.18);
  --glow-soft: 0 8px 28px rgba(15,81,50,.08);
  --aurora: radial-gradient(60% 50% at 18% 0%, rgba(15,81,50,.07), transparent 70%);
  --cat-cash: #1f6f6b; --cat-invest: #5b49c7; --cat-property: #7a6533; --cat-other: #546575;
  --debt-card: #a3407a; --debt-loan: #7d4a6c;
  --shadow: 0 1px 2px rgba(23,32,27,.06), 0 8px 24px rgba(23,32,27,.06);
}

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --t-xs: 13px; --t-s: 14px; --t-m: 16px; --t-l: 20px; --t-xl: 28px; --t-xxl: 44px;
  --r-s: 10px; --r-m: 16px; --r-l: 22px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 240ms;
}
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }
@media (prefers-contrast: more) { :root { --glass: var(--panel); --glass-strong: var(--panel); --line: var(--muted); --aurora: none; } }
@media (prefers-reduced-transparency: reduce) { :root { --glass: var(--panel); --glass-strong: var(--panel); --blur: 0px; } }
/* identity.md A-I1: with Reduce transparency or Increase contrast, the tint is solid too */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root:not([data-theme="light"]) { --ledger-tint: #163126; }
  :root[data-theme="light"] { --ledger-tint: #e4efe8; }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--void); color: var(--ink); font: 16px/1.6 var(--font); }
.num, .money { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 var(--s3); }
a { color: var(--ledger); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; box-shadow: var(--glow-ledger); }
.muted { color: var(--muted); }

/* ---------- Components ---------- */
.wordmark { font-weight: 700; color: var(--ledger); letter-spacing: -.01em; white-space: nowrap; } /* no glow, ever */
.descriptor { color: var(--muted); font-size: var(--t-xs); }

.btn { font: 600 var(--t-s)/1.2 var(--font); border-radius: 999px; padding: 12px 18px; min-height: 44px;
  border: 1px solid var(--ledger); background: var(--ledger); color: var(--on-ledger); cursor: pointer;
  box-shadow: var(--glow-ledger); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ledger); box-shadow: none; }
/* Control edges use muted so they reach 3:1 against what is behind them. */
.btn.quiet { border-color: var(--muted); background: var(--panel-2); color: var(--ink); box-shadow: none; }
.btn.small { padding: 8px 12px; min-height: 36px; font-size: var(--t-xs); }

.card, .glass { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--r-m); padding: var(--s4);
  box-shadow: var(--shadow); backdrop-filter: blur(var(--blur)) saturate(1.2); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2); }
.well { background: var(--panel-2); border-radius: var(--r-s); padding: var(--s3); }
.sheet { background: transparent; }

.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); line-height: 1.2;
  padding: 6px 10px; border-radius: 999px; border: 1px solid var(--glass-edge); color: var(--muted); background: var(--panel-2); white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.chip.device { color: var(--ledger); border-color: rgba(60,207,142,.4); background: var(--ledger-tint); }
.chip.sample { color: var(--ink); border-style: dashed; border-color: var(--muted); }
.chip.later { color: var(--ink); border: 1px dashed var(--muted); }
/* A sentence in the data band (storage refused): wraps, ink on panel-2 */
.chip.notice { color: var(--ink); border-color: var(--muted); border-radius: var(--r-s); white-space: normal; max-width: 100%; font-size: var(--t-s); line-height: 1.4; }
/* "Phase 2" is a status, not a category: ink with a dashed muted edge (identity A-I3). */
.chip.phase2 { color: var(--ink); border: 1px dashed var(--muted); }

.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--muted); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { font: 600 var(--t-xs)/1.2 var(--font); border: 0; background: transparent; color: var(--muted);
  padding: 8px 12px; border-radius: 999px; cursor: pointer; min-height: 32px; }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--glass-edge); }

.disclaimer { font-size: var(--t-xs); color: var(--muted); }
.explain { font: 600 var(--t-xs)/1.2 var(--font); color: var(--ledger); background: var(--ledger-tint);
  border: 1px solid rgba(60,207,142,.25); border-radius: 999px; padding: 6px 10px; cursor: pointer; }

.bar { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; display: flex; gap: 2px; }
.bar > span { display: block; height: 100%; }

.skeleton { background: linear-gradient(90deg, var(--panel-2) 25%, var(--glass-edge) 50%, var(--panel-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 6px; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

.field { display: grid; gap: 6px; font-size: var(--t-s); }
.field input, .field select { font: 16px var(--font); color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--muted); border-radius: var(--r-s); padding: 10px 12px; min-height: 44px; }
.field input:focus { border-color: var(--ledger); outline: none; box-shadow: var(--glow-ledger); }
input[type=range] { accent-color: var(--ledger); width: 100%; }