/* Duit Kita design tokens. Single source of truth for colour, type, spacing, radii, shadow, motion.
   Light is default; dark applies via [data-theme="dark"] on <html>. Never hard-code these values in page CSS. */

/* ===== colors ===== */
/* ---------- Primitives ---------- */
:root{
--blue-50:#F0F4FF;--blue-100:#E1E9FF;--blue-200:#C2D3FF;--blue-400:#5C8BFF;--blue-500:#2F6BFF;--blue-600:#1E55E6;--blue-700:#1642B8;--blue-900:#0A1E5C;
--ink-0:#FFFFFF;--ink-50:#F4F5F7;--ink-100:#ECEDF0;--ink-200:#DFE1E6;--ink-300:#C4C8D0;--ink-400:#959BA6;--ink-500:#6B717D;--ink-600:#4A4F59;--ink-700:#2C3038;--ink-800:#1C1F25;--ink-850:#16181D;--ink-900:#111317;--ink-950:#0A0B0E;
--coral-100:#FFE8E2;--coral-500:#FF5B3A;--coral-600:#E2421F;
--green-100:#DDF6E9;--green-500:#14B86E;--green-600:#0B8F53;
--violet-100:#EEE8FF;--violet-500:#8A5CF6;--violet-600:#6E3FE0;
--amber-100:#FFF1D6;--amber-500:#F2A516;--amber-600:#B87708;
--red-100:#FDE4E5;--red-500:#E5484D;--red-600:#CC2E34;

/* ---------- Semantic — light (default) ---------- */
--bg:var(--ink-50);
--surface:var(--ink-0);
--surface-2:var(--ink-100);
--surface-3:var(--ink-200);
--surface-inverse:var(--ink-950);
--surface-hero:var(--blue-500);
--surface-nav:var(--ink-950);
--scrim:rgba(10,11,14,.48);

--text-1:var(--ink-950);
--text-2:var(--ink-600);
--text-3:var(--ink-500);
--text-inverse:var(--ink-0);
--text-on-accent:#FFFFFF;
--text-on-hero:#FFFFFF;
--text-on-hero-2:rgba(255,255,255,.72);

--border:var(--ink-200);
--border-strong:var(--ink-300);
--focus-ring:rgba(47,107,255,.32);

--accent:var(--blue-500);
--accent-press:var(--blue-600);
--accent-soft:var(--blue-100);
--accent-text:var(--blue-600);

--pos:var(--green-600);
--pos-soft:var(--green-100);
--neg:var(--red-500);
--neg-soft:var(--red-100);
--warn:var(--amber-600);
--warn-soft:var(--amber-100);

/* Transaction types */
--type-expense:var(--coral-500);--type-expense-soft:var(--coral-100);
--type-transfer:var(--blue-500);--type-transfer-soft:var(--blue-100);
--type-revenue:var(--green-500);--type-revenue-soft:var(--green-100);
--type-commitment:var(--violet-500);--type-commitment-soft:var(--violet-100);
--type-opening:var(--ink-500);--type-opening-soft:var(--ink-100);

/* Double-entry sides: CR = money leaves (from), DR = money lands (to) */
--cr-bg:var(--ink-950);--cr-fg:#FFFFFF;
--dr-bg:var(--blue-500);--dr-fg:#FFFFFF;
--rail:var(--ink-300);
color-scheme:light;
}

/* ---------- Semantic — dark ---------- */
[data-theme="dark"]{
--bg:var(--ink-950);
--surface:var(--ink-850);
--surface-2:var(--ink-800);
--surface-3:var(--ink-700);
--surface-inverse:var(--ink-0);
--surface-hero:var(--blue-500);
--surface-nav:var(--ink-800);
--scrim:rgba(0,0,0,.62);

--text-1:#F3F4F6;
--text-2:#B4B9C2;
--text-3:#8A909B;
--text-inverse:var(--ink-950);

--border:#262A31;
--border-strong:#363B44;
--focus-ring:rgba(92,139,255,.4);

--accent:var(--blue-400);
--accent-press:var(--blue-500);
--accent-soft:rgba(92,139,255,.16);
--accent-text:#86A8FF;

--pos:#3DD68C;--pos-soft:rgba(20,184,110,.16);
--neg:#FF6B70;--neg-soft:rgba(229,72,77,.18);
--warn:#FFC24D;--warn-soft:rgba(242,165,22,.16);

--type-expense:#FF7A5C;--type-expense-soft:rgba(255,91,58,.16);
--type-transfer:var(--blue-400);--type-transfer-soft:rgba(92,139,255,.16);
--type-revenue:#3DD68C;--type-revenue-soft:rgba(20,184,110,.16);
--type-commitment:#A98BFF;--type-commitment-soft:rgba(138,92,246,.18);
--type-opening:#8A909B;--type-opening-soft:rgba(255,255,255,.06);

--cr-bg:#F3F4F6;--cr-fg:var(--ink-950);
--dr-bg:var(--blue-400);--dr-fg:var(--ink-950);
--rail:#363B44;
color-scheme:dark;
}

/* ===== typography ===== */
:root{
--font-display:"Bricolage Grotesque","Onest",system-ui,sans-serif;
--font-sans:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;

/* Scale (mobile px) */
--fs-hero:56px;      /* hero month total */
--fs-display:40px;   /* keypad amount */
--fs-title:28px;     /* screen title */
--fs-headline:20px;  /* sheet / section title */
--fs-body-l:17px;    /* row titles, amounts in lists */
--fs-body:15px;      /* default UI text */
--fs-body-s:14px;
--fs-caption:13px;   /* meta, sublabels */
--fs-micro:11px;     /* tags, DR/CR, overlines */

--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-black:800;
--lh-tight:1.02;--lh-snug:1.2;--lh-body:1.45;
--ls-tight:-0.03em;--ls-snug:-0.015em;--ls-overline:0.08em;

/* Semantic aliases */
--text-hero:var(--fw-bold) var(--fs-hero)/var(--lh-tight) var(--font-display);
--text-title:var(--fw-bold) var(--fs-title)/var(--lh-snug) var(--font-display);
--text-headline:var(--fw-bold) var(--fs-headline)/var(--lh-snug) var(--font-display);
--text-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
--text-label:var(--fw-semibold) var(--fs-body)/var(--lh-snug) var(--font-sans);
--text-caption:var(--fw-medium) var(--fs-caption)/var(--lh-snug) var(--font-sans);
--text-overline:var(--fw-bold) var(--fs-micro)/1 var(--font-sans);
}

/* ===== spacing ===== */
:root{
--sp-0:0px;--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;
--gutter:20px;          /* screen side padding */
--stack:12px;           /* gap between cards */
--section-gap:28px;     /* gap between sections */
--tap:48px;             /* minimum hit target */
--tap-l:56px;
--r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:28px;--r-pill:999px;
--app-w:520px;          /* single column max width */
--fold-w:880px;         /* two-column max width (Magic V5 inner screen) */
--nav-h:68px;
--safe-b:env(safe-area-inset-bottom,0px);
--safe-t:env(safe-area-inset-top,0px);
}

/* ===== effects ===== */
:root{
--shadow-1:0 1px 2px rgba(10,11,14,.05);
--shadow-2:0 1px 2px rgba(10,11,14,.04),0 8px 24px -12px rgba(10,11,14,.16);
--shadow-float:0 12px 32px -8px rgba(10,11,14,.35);
--shadow-sheet:0 -12px 40px rgba(10,11,14,.18);
--shadow-hero:0 18px 40px -18px rgba(47,107,255,.65);
--ease-out:cubic-bezier(.2,.8,.2,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
--dur-1:120ms;--dur-2:200ms;--dur-3:320ms;
--press-scale:.96;
--blur-nav:saturate(1.4) blur(16px);
}
[data-theme="dark"]{
--shadow-1:none;
--shadow-2:0 0 0 1px rgba(255,255,255,.04);
--shadow-float:0 12px 32px -8px rgba(0,0,0,.7);
--shadow-sheet:0 -12px 40px rgba(0,0,0,.6);
--shadow-hero:0 18px 40px -18px rgba(47,107,255,.5);
}