/* «Мой бюджет» — дизайн-токены. Идентичность: «Латунь и графит».
   Подключать ПЕРВЫМ, до style.css. Компоненты стилизуются ТОЛЬКО через семантические переменные. */

/* ---------- 1. БАЗОВЫЕ КОНСТАНТЫ (в компонентах напрямую не использовать) ---------- */
:root{
  --ink-950:#0B0D10; --ink-900:#0F1216; --ink-850:#14181D; --ink-800:#191E24;
  --ink-750:#1F252C; --ink-700:#262D36; --ink-600:#39424E; --ink-500:#5A6572;
  --ink-400:#7E8996; --ink-300:#A6B0BB; --ink-200:#CCD3DA; --ink-100:#E4E8EC;
  --ink-050:#F0F1EF; --ink-025:#F7F7F5; --white:#FFFFFF;

  --brass-700:#8A5F16; --brass-600:#A8761F; --brass-500:#C08A2E;
  --brass-400:#D79E44; --brass-300:#E5B25E; --brass-200:#F0C888;

  --heat-mid-l:#D8792A; --heat-mid-d:#EE9A46;

  --mint-700:#0C6E50; --mint-600:#12916A; --mint-500:#1FB183; --mint-400:#3FD09B;
  --coral-700:#A32D25; --coral-600:#CE3F35; --coral-500:#E85647; --coral-400:#FF7C6C;
}

/* ---------- 2. СЕМАНТИКА — СВЕТЛАЯ ТЕМА (по умолчанию) ---------- */
:root{
  --bg-app:#F4F4F2;
  --bg-surface:var(--white);
  --bg-surface-2:#FAFAF8;
  --bg-sunken:#EBEBE8;
  --bg-elevated:var(--white);
  --bg-scrim:rgba(15,18,22,.42);
  --bg-nav:#ffffff;                    /* нижнее меню непрозрачное — под ним не должен просвечивать контент */
  --bg-header:rgba(244,244,242,.82);

  --fg-strong:#12161B;
  --fg:#2C333C;
  --fg-muted:#67707C;
  --fg-faint:#98A1AC;
  --fg-on-accent:#1A1204;

  --stroke:rgba(18,22,27,.10);
  --stroke-strong:rgba(18,22,27,.18);

  --accent:var(--brass-500);
  --accent-hover:var(--brass-600);
  --accent-soft:rgba(192,138,46,.12);
  --accent-ring:rgba(192,138,46,.45);
  --accent-grad:linear-gradient(160deg,var(--brass-400) 0%,var(--brass-600) 100%);

  --income:var(--mint-600);
  --income-soft:rgba(18,145,106,.12);
  --expense:var(--coral-600);
  --expense-soft:rgba(206,63,53,.12);
  --heat-mid:var(--heat-mid-l);

  --shadow-1:0 1px 2px rgba(16,20,26,.06),0 0 0 1px rgba(16,20,26,.04);
  --shadow-2:0 6px 18px -8px rgba(16,20,26,.22),0 0 0 1px rgba(16,20,26,.05);
  --shadow-3:0 24px 48px -18px rgba(16,20,26,.30),0 0 0 1px rgba(16,20,26,.06);
  --shadow-fab:0 12px 26px -8px rgba(192,138,46,.55),0 2px 6px rgba(16,20,26,.18);
  --skeleton-shine:rgba(255,255,255,.75);
  color-scheme:light;
}

/* ---------- 3. ТЁМНАЯ ТЕМА ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg-app:var(--ink-900); --bg-surface:var(--ink-850); --bg-surface-2:var(--ink-800);
    --bg-sunken:#11151A; --bg-elevated:var(--ink-800);
    --bg-scrim:rgba(5,7,9,.62);
    --bg-nav:#14181d; --bg-header:rgba(15,18,22,.78);
    --fg-strong:#F2F4F6; --fg:#DDE2E7; --fg-muted:#98A2AE; --fg-faint:#6C7783;
    --fg-on-accent:#1A1204;
    --stroke:rgba(255,255,255,.08); --stroke-strong:rgba(255,255,255,.16);
    --accent:var(--brass-300); --accent-hover:var(--brass-200);
    --accent-soft:rgba(229,178,94,.14); --accent-ring:rgba(229,178,94,.50);
    --accent-grad:linear-gradient(160deg,var(--brass-200) 0%,var(--brass-400) 100%);
    --income:var(--mint-400); --income-soft:rgba(63,208,155,.14);
    --expense:var(--coral-400); --expense-soft:rgba(255,124,108,.14);
    --heat-mid:var(--heat-mid-d);
    --shadow-1:0 1px 2px rgba(0,0,0,.40),0 0 0 1px rgba(255,255,255,.05);
    --shadow-2:0 8px 22px -10px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
    --shadow-3:0 28px 56px -20px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.07);
    --shadow-fab:0 14px 30px -10px rgba(229,178,94,.40),0 3px 8px rgba(0,0,0,.55);
    --skeleton-shine:rgba(255,255,255,.06);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg-app:var(--ink-900); --bg-surface:var(--ink-850); --bg-surface-2:var(--ink-800);
  --bg-sunken:#11151A; --bg-elevated:var(--ink-800);
  --bg-scrim:rgba(5,7,9,.62);
  --bg-nav:#14181d; --bg-header:rgba(15,18,22,.78);
  --fg-strong:#F2F4F6; --fg:#DDE2E7; --fg-muted:#98A2AE; --fg-faint:#6C7783;
  --fg-on-accent:#1A1204;
  --stroke:rgba(255,255,255,.08); --stroke-strong:rgba(255,255,255,.16);
  --accent:var(--brass-300); --accent-hover:var(--brass-200);
  --accent-soft:rgba(229,178,94,.14); --accent-ring:rgba(229,178,94,.50);
  --accent-grad:linear-gradient(160deg,var(--brass-200) 0%,var(--brass-400) 100%);
  --income:var(--mint-400); --income-soft:rgba(63,208,155,.14);
  --expense:var(--coral-400); --expense-soft:rgba(255,124,108,.14);
  --heat-mid:var(--heat-mid-d);
  --shadow-1:0 1px 2px rgba(0,0,0,.40),0 0 0 1px rgba(255,255,255,.05);
  --shadow-2:0 8px 22px -10px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06);
  --shadow-3:0 28px 56px -20px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.07);
  --shadow-fab:0 14px 30px -10px rgba(229,178,94,.40),0 3px 8px rgba(0,0,0,.55);
  --skeleton-shine:rgba(255,255,255,.06);
  color-scheme:dark;
}

/* ---------- 4. ПАЛИТРА КАТЕГОРИЙ (L≈62, читаются на обоих фонах) ---------- */
:root{
  --cat-food:#4FA96B;
  --cat-cafe:#E0763C;
  --cat-transport:#3E8BD8;
  --cat-home:#7A6FE0;
  --cat-health:#E2566F;
  --cat-fun:#22B2AE;
  --cat-clothes:#C069C4;
  --cat-tech:#6E8FA6;
  --cat-kids:#F0A63C;
  --cat-pets:#9C8B5E;
  --cat-gifts:#D9557F;
  --cat-other:#8590A0;
  --cat-salary:#1FB183;
  --cat-transfer:#7E8996;
}

/* ---------- 5. ТИПОГРАФИКА ---------- */
:root{
  --font-display:"Unbounded","Onest",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-ui:"Onest",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --font-num:"JetBrains Mono","SF Mono",ui-monospace,monospace;

  --fs-hero:clamp(38px,11.5vw,54px); --lh-hero:1.02; --ls-hero:-.035em;
  --fs-display:clamp(26px,7vw,32px); --lh-display:1.08; --ls-display:-.03em;
  --fs-h1:23px; --lh-h1:1.18; --ls-h1:-.022em;
  --fs-h2:19px; --lh-h2:1.24; --ls-h2:-.016em;
  --fs-h3:16px; --lh-h3:1.30; --ls-h3:-.010em;
  --fs-body:15px; --lh-body:1.46;
  --fs-sm:13px; --lh-sm:1.40;
  --fs-xs:11.5px; --lh-xs:1.30;
  --fs-eyebrow:11px; --ls-eyebrow:.09em;
  --fs-num-xl:28px; --fs-num-lg:21px; --fs-num-md:15px; --fs-num-sm:13px;
}

/* ---------- 6. ГЕОМЕТРИЯ, СЕТКА, СЛОИ ---------- */
:root{
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-full:999px;
  --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;
  --pad-x:16px;
  --w-app:520px;
  --h-header:56px;
  --h-nav:62px;
  --h-row:60px;
  --tap:44px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --z-base:0; --z-sticky:20; --z-header:30; --z-nav:40; --z-fab:45;
  --z-scrim:50; --z-sheet:60; --z-toast:70; --z-banner:80;
}

/* ---------- 7. ДВИЖЕНИЕ ---------- */
:root{
  --dur-tap:110ms; --dur-fast:180ms; --dur-base:260ms; --dur-slow:340ms; --dur-roll:560ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-reduced-motion:reduce){
  :root{ --dur-tap:1ms; --dur-fast:1ms; --dur-base:1ms; --dur-slow:1ms; --dur-roll:1ms; }
  *,*::before,*::after{
    animation-duration:1ms!important; animation-iteration-count:1!important;
    transition-duration:1ms!important; scroll-behavior:auto!important;
  }
}