/* SOLTERS — Color system
   Brand = lime #AFED4A + near-black ink (from the wordmark & mark).
   Money is the language. Semantic color is IRONCLAD:
     risk (red)  = losing money / urgent
     warn (amber)= attention
     ok  (green) = healthy
   Lime is BRAND CHROME (logo, active nav, selection, focus spark, key highlight) —
   never a data signal. Primary actions are INK (calm/adult, Linear-like).
   Healthy-money green is a distinct emerald so it never reads as the lime brand.
   ≤2 accent colors per screen besides risk semantics. No "dashboard casino". */

:root {
  /* ---- Neutral ramp (cool gray, iOS Settings calm) ---- */
  --gray-0:  #ffffff;
  --gray-25: #fafbfc;
  --gray-50: #f5f6f8;
  --gray-100:#eef0f3;
  --gray-150:#e7e9ee;
  --gray-200:#dde0e6;
  --gray-300:#c8ccd4;
  --gray-400:#a6acb8;
  --gray-500:#808895;
  --gray-600:#5c6472;
  --gray-700:#434b58;
  --gray-800:#2a313c;
  --gray-900:#171c24;
  --gray-950:#0a0d12;
  --ink:     #0a0a0a; /* brand black (wordmark) */

  /* ---- Brand lime ---- */
  --lime-50:  #f4fce1;
  --lime-100: #e8f8c4;
  --lime-200: #d6f299;
  --lime-300: #c3ec6f;
  --lime-400: #afed4a; /* BRAND */
  --lime-500: #9fe030;
  --lime-600: #86c518;
  --lime-700: #6ba00f;
  --lime-800: #4f7a0c; /* dark lime — readable positive text on white */

  /* ---- Semantic hues ---- */
  --red-50:  #fdecec;  --red-100:#fbd8d9; --red-500:#e5484d; --red-600:#cf2f34; --red-700:#a92327;
  --amber-50:#fdf3e2;  --amber-100:#fae3bd; --amber-500:#e0930b; --amber-600:#c07908; --amber-700:#9a6108;
  --green-50:#e8f6ee;  --green-100:#cceedd; --green-500:#1f9d57; --green-600:#178048; --green-700:#106239; /* LEGACY — positive semantics now use the lime family (see --ok*). Kept only for reference. */
  /* NOTE: no extra decorative accent. Lime is the ONLY brand accent (also used for AI).
     Positive/health semantics use LIME shades (light→dark); red/amber remain semantic. */
}

/* ============ SEMANTIC ALIASES — light theme (default) ============ */
:root {
  color-scheme: light;

  /* surfaces */
  --bg-app:        var(--gray-50);
  --bg-subtle:     var(--gray-100);
  --surface:       var(--gray-0);
  --surface-raised:var(--gray-0);
  --surface-hover: var(--gray-25);
  --surface-sunken:var(--gray-50);
  --overlay:       rgba(10,13,18,.44);

  /* borders */
  --border:        var(--gray-150);
  --border-strong: var(--gray-200);
  --border-focus:  var(--gray-900);
  --divider:       var(--gray-100);

  /* text */
  --text-strong: var(--gray-900);
  --text-body:   var(--gray-800);
  --text-muted:  var(--gray-600);
  --text-subtle: var(--gray-500);
  --text-faint:  var(--gray-400);
  --text-invert: var(--gray-0);
  --text-link:   var(--gray-900);

  /* brand lime — chrome, selection, active state, highlight */
  --brand:        var(--lime-400);
  --brand-strong: var(--lime-500);
  --brand-press:  var(--lime-600);
  --brand-soft:   var(--lime-50);
  --brand-soft-border: var(--lime-200);
  --brand-ink:    var(--lime-700); /* readable lime-family text on light */
  --on-brand:     var(--ink);      /* black text on lime fills */

  /* accent alias == brand (components read --accent for the highlight color) */
  --accent:        var(--brand);
  --accent-hover:  var(--brand-strong);
  --accent-press:  var(--brand-press);
  --accent-soft:   var(--brand-soft);
  --accent-soft-border: var(--brand-soft-border);
  --accent-ink:    var(--brand-ink);
  --on-accent:     var(--on-brand);

  /* primary interactive = INK */
  --action:        var(--gray-900);
  --action-hover:  #10151c;
  --action-press:  var(--ink);
  --on-action:     #ffffff;

  /* AI accent = brand lime (AI is a first-class brand surface, not a separate color) */
  --ai:      var(--brand);
  --ai-soft: var(--brand-soft);

  /* money semantics */
  --risk:        var(--red-500);
  --risk-ink:    var(--red-700);
  --risk-soft:   var(--red-50);
  --risk-border: var(--red-100);

  --warn:        var(--amber-500);
  --warn-ink:    var(--amber-700);
  --warn-soft:   var(--amber-50);
  --warn-border: var(--amber-100);

  --ok:          var(--lime-600);
  --ok-ink:      var(--lime-800);
  --ok-soft:     var(--lime-50);
  --ok-border:   var(--lime-200);

  /* money figure ink — the hero number is neutral; the DELTA carries semantic color */
  --money-ink:   var(--gray-900);

  /* focus ring — ink-based for reliable contrast on light + lime surfaces */
  --ring: 0 0 0 3px color-mix(in srgb, var(--gray-900) 22%, transparent);
}

/* ============ DARK THEME (tokens laid in now; implementation later) ============ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-app:        var(--gray-950);
  --bg-subtle:     #12161d;
  --surface:       #14181f;
  --surface-raised:#1a1f28;
  --surface-hover: #1e242e;
  --surface-sunken:#0a0d12;
  --overlay:       rgba(0,0,0,.6);

  --border:        #242b35;
  --border-strong: #333c49;
  --border-focus:  var(--lime-400);
  --divider:       #1e242e;

  --text-strong: #f3f5f8;
  --text-body:   #dfe3ea;
  --text-muted:  #9aa2b1;
  --text-subtle: #79818f;
  --text-faint:  #5b626e;
  --text-invert: var(--gray-950);
  --text-link:   #d6f299;

  --brand:        var(--lime-400);
  --brand-strong: var(--lime-300);
  --brand-press:  var(--lime-200);
  --brand-soft:   #1e2a0d;
  --brand-soft-border: #33470f;
  --brand-ink:    var(--lime-300);
  --on-brand:     var(--ink);

  --accent:        var(--brand);
  --accent-hover:  var(--brand-strong);
  --accent-press:  var(--brand-press);
  --accent-soft:   var(--brand-soft);
  --accent-soft-border: var(--brand-soft-border);
  --accent-ink:    var(--brand-ink);
  --on-accent:     var(--on-brand);

  --action:        #f3f5f8;
  --action-hover:  #ffffff;
  --action-press:  #d6dae1;
  --on-action:     var(--gray-900);

  --ai:      var(--brand);
  --ai-soft: var(--brand-soft);

  --risk:        #ff6169;  --risk-ink:#ff9195;  --risk-soft:#2a1416; --risk-border:#4a1e21;
  --warn:        #f0a52a;  --warn-ink:#f5c069;  --warn-soft:#2a1f0d; --warn-border:#4a380f;
  --ok:          #9fe030;  --ok-ink:#c3ec6f;    --ok-soft:#1e2a0d;  --ok-border:#33470f;

  --money-ink:   #f3f5f8;

  --ring: 0 0 0 3px color-mix(in srgb, var(--lime-400) 45%, transparent);
}