/* ==========================================================================
   Vault Ledger — Design Tokens
   Consumer-fintech aesthetic: Monobank / Revolut / Copilot Money / Lunch Money
   Russian UI · Light + Dark · Multi-currency
   ========================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Type stacks */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-numeric: 'Manrope', -apple-system, system-ui, sans-serif; /* tabular-nums enabled via font-feature */

  /* Type scale (px) — semantic */
  --fs-xs: 11px;     /* caption / meta / labels */
  --fs-sm: 13px;     /* body small */
  --fs-md: 15px;     /* body / default */
  --fs-lg: 17px;     /* body emphasized / subtitle */
  --fs-xl: 22px;     /* h4 */
  --fs-2xl: 28px;    /* h3 — card value */
  --fs-3xl: 36px;    /* h2 — page title, hero number */
  --fs-4xl: 48px;    /* h1 — big balance */
  --fs-5xl: 64px;    /* display — hero balance */

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* Letter-spacing */
  --ls-tight: -0.02em;   /* display numbers */
  --ls-snug: -0.01em;    /* headings */
  --ls-normal: 0;
  --ls-wide: 0.04em;     /* caps labels */

  /* ---------- Neutral ramp (source of truth) ---------- */
  /* Warm-cool neutral — slightly warm so it reads "human", not "spreadsheet" */
  --slate-0:  #ffffff;
  --slate-50: #fafafb;
  --slate-100:#f4f4f7;
  --slate-150:#ecedf1;
  --slate-200:#e2e3ea;
  --slate-300:#cdcfd8;
  --slate-400:#9a9db0;
  --slate-500:#6c6f82;
  --slate-600:#4a4d5e;
  --slate-700:#2f3243;
  --slate-800:#1e2030;
  --slate-850:#161826;
  --slate-900:#0f1120;
  --slate-950:#0a0b16;

  /* ---------- Brand (accent) ---------- */
  /* Signature green — distinct from Revolut blue / Monobank black.
     Evokes money-positive, growth, fresh, calm. */
  --brand-50:  #e9faf3;
  --brand-100: #c9f3df;
  --brand-200: #95e6bf;
  --brand-300: #5bd69c;
  --brand-400: #22c27a;
  --brand-500: #0caa63;   /* primary */
  --brand-600: #0a8c52;
  --brand-700: #0a6f42;
  --brand-800: #0a5334;
  --brand-900: #083e28;

  /* ---------- Semantic signal ---------- */
  --pos-500: #0caa63;   /* income, positive delta (= brand) */
  --neg-500: #e5484d;   /* expense, overdue */
  --warn-500:#f5a524;   /* due-soon */
  --info-500:#3e8eff;   /* transfer, informational */

  --pos-tint: rgba(12,170,99, .12);
  --neg-tint: rgba(229,72,77, .12);
  --warn-tint: rgba(245,165,36, .14);
  --info-tint: rgba(62,142,255, .12);

  /* ---------- Currency accents ---------- */
  /* Each currency gets a calm, low-chroma tone — used as a thin stripe or dot, never a full fill. */
  --c-eur: #3e8eff;
  --c-usd: #0caa63;
  --c-rub: #e5484d;
  --c-kgs: #f5a524;
  --c-crypto: #a06bff;

  /* ---------- Category palette ---------- */
  /* Muted, differentiated — avoids "rainbow iOS app" vibe while staying scannable. */
  --cat-food:    #ef6f4e;   /* еда / продукты */
  --cat-cafe:    #d87a4b;   /* кафе */
  --cat-transport:#f5a524;  /* транспорт */
  --cat-rent:    #22c27a;   /* аренда / жильё */
  --cat-subs:    #3e8eff;   /* подписки */
  --cat-fun:     #a06bff;   /* развлечения */
  --cat-health:  #12b0a6;   /* здоровье */
  --cat-clothes: #e5484d;   /* одежда */
  --cat-home:    #8a8f9e;   /* быт */
  --cat-other:   #6c6f82;   /* прочее */
  --cat-salary:  #0caa63;   /* зарплата */
  --cat-transfer:#3e8eff;   /* перевод */

  /* ---------- Spacing ---------- */
  --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;
  --sp-10: 72px;

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 999px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 320ms;
}

/* ===================================================================
   Light theme (default)
   "сколько утреннего кофе и банковского приложения" — мягкий, теплый
   =================================================================== */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bg: #f6f6f9;               /* page background — off-white, slight cool cast */
  --bg-elev: #ffffff;          /* elevated surface */
  --surface: #ffffff;          /* cards, nav, inputs fill */
  --surface-2: #fafafb;        /* secondary surface (input bg on cards) */
  --surface-3: #f1f1f5;        /* tertiary — chip bg, progress track */
  --surface-hover: #f4f4f7;

  /* Text */
  --fg: #111225;               /* near-black primary text */
  --fg-2: #4a4d5e;             /* body / labels */
  --fg-3: #8b8ea0;             /* meta / caption / placeholders */
  --fg-inverse: #ffffff;

  /* Lines */
  --border: #ecedf1;
  --border-strong: #d9dae2;
  --divider: rgba(17, 18, 37, .06);

  /* Brand on surface */
  --accent: var(--brand-500);
  --accent-hover: var(--brand-600);
  --accent-tint: rgba(12,170,99, .10);
  --accent-fg: #ffffff;

  /* Shadows — low, layered, warm */
  --shadow-xs: 0 1px 2px rgba(17, 18, 37, .04);
  --shadow-sm: 0 2px 8px rgba(17, 18, 37, .06), 0 1px 2px rgba(17, 18, 37, .04);
  --shadow-md: 0 8px 24px rgba(17, 18, 37, .08), 0 2px 6px rgba(17, 18, 37, .04);
  --shadow-lg: 0 24px 48px rgba(17, 18, 37, .14), 0 8px 16px rgba(17, 18, 37, .06);
  --shadow-ring: 0 0 0 4px rgba(12,170,99, .18);

  /* Semantic on surface */
  --pos: #0a8c52;
  --neg: #d23236;
  --warn: #c47c10;
  --info: #2e79e8;

  --pos-bg: rgba(12,170,99, .10);
  --neg-bg: rgba(229,72,77, .10);
  --warn-bg: rgba(245,165,36, .14);
  --info-bg: rgba(62,142,255, .10);

  /* Calendar heat */
  --heat-0: transparent;
  --heat-1: rgba(229,72,77, .08);
  --heat-2: rgba(229,72,77, .18);
  --heat-3: rgba(229,72,77, .32);
  --heat-4: rgba(229,72,77, .48);

  color-scheme: light;
}

/* ===================================================================
   Dark theme
   =================================================================== */
[data-theme="dark"] {
  --bg: #0c0e1a;
  --bg-elev: #141627;
  --surface: #161826;
  --surface-2: #1c1e2f;
  --surface-3: #22243a;
  --surface-hover: #1e2133;

  --fg: #f0f1f6;
  --fg-2: #b7bacb;
  --fg-3: #7d8195;
  --fg-inverse: #0c0e1a;

  --border: #23253a;
  --border-strong: #2e3048;
  --divider: rgba(255, 255, 255, .06);

  --accent: #22c27a;
  --accent-hover: #5bd69c;
  --accent-tint: rgba(34,194,122, .14);
  --accent-fg: #07200f;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.32), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 8px 24px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.24);
  --shadow-lg: 0 24px 48px rgba(0,0,0,.5), 0 8px 16px rgba(0,0,0,.3);
  --shadow-ring: 0 0 0 4px rgba(34,194,122, .24);

  --pos: #4ed799;
  --neg: #ff6b70;
  --warn: #ffbc48;
  --info: #6aa9ff;

  --pos-bg: rgba(34,194,122, .14);
  --neg-bg: rgba(255,107,112, .14);
  --warn-bg: rgba(255,188,72, .16);
  --info-bg: rgba(106,169,255, .14);

  --heat-0: transparent;
  --heat-1: rgba(255,107,112, .09);
  --heat-2: rgba(255,107,112, .20);
  --heat-3: rgba(255,107,112, .34);
  --heat-4: rgba(255,107,112, .52);

  color-scheme: dark;
}

/* ===================================================================
   Semantic type roles
   =================================================================== */
.t-display {
  font-family: var(--font-numeric);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}
.t-h1 { font-size: var(--fs-4xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); }
.t-h2 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-snug); line-height: var(--lh-tight); }
.t-h3 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-snug); line-height: var(--lh-snug); }
.t-h4 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-snug); line-height: var(--lh-snug); }
.t-body { font-size: var(--fs-md); font-weight: var(--fw-regular); line-height: var(--lh-normal); }
.t-body-strong { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-normal); }
.t-small { font-size: var(--fs-sm); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg-2); }
.t-meta  { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--fg-3); letter-spacing: 0; }
.t-caps  { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--fg-3); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.t-mono  { font-family: var(--font-mono); font-size: var(--fs-sm); font-feature-settings: 'tnum' 1; }
.t-num   { font-feature-settings: 'tnum' 1, 'ss01' 1; font-variant-numeric: tabular-nums; }

/* Base */
html { font-family: var(--font-sans); font-size: 16px; }
body { font-feature-settings: 'tnum' 1, 'ss01' 1, 'cv11' 1; }