/* Synced from the Moony app repository (docs/design-system/tokens.css). Do not edit here; run npm run tokens:sync. */
/* Moony design tokens — single source of truth.
   Light theme only (dark theme dropped for v1, see README.md §11).
   Every value here has a name; components never use raw hex. */
:root {
  /* ---- Surfaces (from outer canvas to the elevated workspace) ---- */
  --canvas: #eeece7;        /* outer canvas, one tone darker than content */
  --canvas-glow: #fbfaf7;   /* radial highlight top-right of the canvas */
  --sidebar: #f8f7f3;       /* sidebar layer */
  --sidebar-2: #f5f4f0;     /* sidebar gradient end */
  --paper: #ffffff;         /* working surfaces: cards, tables, modals */
  --paper-2: #fdfcf9;       /* card gradient end (barely warmer than paper) */
  --well: #f7f6f2;          /* inset areas: table header, modal footer, hover rows */
  --well-2: #e9e7e1;        /* segmented-control track, chips, avatar */
  --well-3: #e3e0d9;        /* stronger inset: progress track, skeleton */

  /* ---- Lines ---- */
  --line: #e2dfd7;          /* card and table borders */
  --line-soft: #efede8;     /* row dividers, chart grid */
  --line-strong: #d9d5cd;   /* secondary button border, input border */
  --line-sidebar: #e1ded6;

  /* ---- Ink (text), from primary to faintest ---- */
  --ink: #292822;           /* headings, primary values, names */
  --ink-2: #504d46;         /* body copy, table values */
  --ink-3: #817e75;         /* secondary text, descriptions */
  --ink-4: #98948b;         /* labels, captions, eyebrows */
  --ink-5: #aaa7a0;         /* axis ticks, placeholders */
  --ink-inverse: #ffffff;
  --ink-inverse-2: #d6d3cc; /* secondary text on dark material */

  /* ---- Dark material (active nav, primary button) ---- */
  --dark: #2c2a25;
  --dark-hi: #3b3932;       /* gradient start (light edge) */
  --dark-lo: #27251f;       /* gradient end */
  --dark-hover-hi: #46433b;
  --dark-hover-lo: #2f2d27;
  --dark-grad: linear-gradient(145deg, var(--dark-hi), var(--dark-lo));
  --dark-grad-hover: linear-gradient(145deg, var(--dark-hover-hi), var(--dark-hover-lo));

  /* ---- Semantic: the only two chromatic colors in the UI ---- */
  --gain: #107a60;          /* positive change ONLY (never decoration) */
  --gain-soft: #e6f5ee;     /* tint for gain badges */
  --loss: #bf4224;          /* negative change, destructive, validation errors */
  --loss-soft: #fcece6;

  /* ---- Data series (one muted indigo family, max 4 + other; validated ΔE ≥ 15 between neighbours) ---- */
  --s1: #212339;
  --s2: #454a73;
  --s3: #7176a0;
  --s4: #a6a9c8;
  --s-other: #ebe9e3;       /* "Ostatní" bucket, always labeled */
  --chart-line: #3c3f67;    /* primary value line */
  --chart-area: #e1e1ee;    /* area fill start (fades to transparent) */
  --chart-grid: #efeeea;
  --chart-cost: #a8a49b;    /* dashed "invested" step line */
  --chart-axis: #aaa7a0;

  /* ---- Focus ---- */
  --focus-border: #57544d;
  --focus-ring: 0 0 0 3px rgba(39, 38, 32, 0.10);

  /* ---- Radius ---- */
  --r-1: 6px;   /* inputs, segmented buttons, small chips */
  --r-2: 8px;   /* buttons, nav rows, menu, badges */
  --r-3: 13px;  /* stat cards */
  --r-4: 15px;  /* cards, tables */
  --r-5: 17px;  /* modal */

  /* ---- Elevation ---- */
  --sh-sidebar: 7px 0 22px rgba(58, 53, 36, 0.03);
  --sh-1: 0 2px 5px rgba(64, 58, 43, 0.05), 0 9px 22px rgba(64, 58, 43, 0.02);     /* stat card */
  --sh-2: 0 4px 10px rgba(68, 60, 43, 0.05), 0 16px 35px rgba(68, 60, 43, 0.03);   /* card */
  --sh-3: 0 4px 11px rgba(68, 60, 43, 0.055), 0 20px 38px rgba(68, 60, 43, 0.035); /* table (workspace) */
  --sh-pop: 0 8px 24px rgba(18, 17, 13, 0.12), 0 1px 2px rgba(18, 17, 13, 0.06);  /* menu, tooltip */
  --sh-modal: 0 26px 80px rgba(18, 17, 13, 0.44);
  --sh-dark: inset 0 1px rgba(255, 255, 255, 0.13), 0 3px 7px rgba(39, 35, 28, 0.15); /* dark material */
  --sh-btn: 0 1px 2px rgba(52, 46, 34, 0.06);                                       /* secondary button */
  --scrim: rgba(30, 29, 25, 0.63);

  /* ---- Typography ---- */
  --font: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: 42px;  --fw-display: 580; --ls-display: -0.08em;  /* hero number */
  --fs-h1: 36px;       --fw-h1: 570;      --ls-h1: -0.07em;       /* page title */
  --fs-h2: 18px;       --fw-h2: 650;      --ls-h2: -0.045em;      /* card / table title */
  --fs-h3: 16px;       --fw-h3: 620;      --ls-h3: -0.04em;       /* section inside a card */
  --fs-stat: 22px;     --fw-stat: 580;    --ls-stat: -0.06em;     /* stat value */
  --fs-modal: 21px;    --fw-modal: 600;   --ls-modal: -0.05em;    /* modal title */
  --fs-body: 13px;     --fw-body: 450;
  --fs-nav: 14px;      --fw-nav: 600;     --ls-nav: -0.015em;
  --fs-table: 12px;    --fw-table: 480;   --fw-table-name: 650;
  --fs-caption: 11px;  --fw-caption: 500;
  --fs-micro: 10px;    --fw-micro: 600;
  --fs-eyebrow: 10px;  --fw-eyebrow: 700; --ls-eyebrow: 0.12em;
  --fs-thead: 10px;    --fw-thead: 750;   --ls-thead: 0.08em;

  /* ---- Spacing (4px base) ---- */
  --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: 48px;

  /* ---- Layout ---- */
  --sidebar-w: 264px;
  --page-max: 1480px;
  --page-pad-x: 48px;
  --page-pad-t: 32px;
  --control-h: 36px;
  --control-h-sm: 32px;
  --input-h: 39px;
  --nav-row-h: 36px;
  --table-row-h: 56px;

  /* ---- Motion ---- */
  --t-fast: 120ms;
  --t-base: 180ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}