/* gnance design tokens (design-system.md v1.1). The only place a colour, radius, shadow or
   duration is written as a literal; every other stylesheet uses var(--…). Dark applies when
   html[data-theme="dark"], or when the OS prefers dark and no explicit light theme is set. */
:root {
  color-scheme: light;
  --paper: #FAF9F6;   --paper-2: #F3F1EC;
  --ink: #141311;     --ink-2: #4A4740;     --ink-3: #6F6B63;
  --line: #E6E2DA;    --line-2: #D5D0C6;
  --accent: #1F5AF6;  --accent-ink: #FFFFFF;  --accent-soft: #E8EEFF;
  --income: #187445;  --income-soft: #E3F3EA;
  --spend: var(--ink); --spend-soft: #ECEAE4;
  --invested: #4C3FB5; --invested-soft: #ECE9FA;
  --transfer: #6F6B63; --transfer-soft: #F0EEE9;
  --unresolved: #9A5708; --unresolved-soft: #FBEFD9;
  --danger: #B4232C;  --danger-soft: #F9E3E4;
  --focus: #1F5AF6;
  --backdrop: rgba(20, 19, 17, .24);
  --shadow-hover: 0 4px 16px rgba(20, 19, 17, .08);
  --shadow-pop: 0 8px 28px rgba(20, 19, 17, .12);   /* popovers, drawer, sheet only — never at rest */

  --radius: 12px; --radius-sm: 8px; --radius-xs: 4px; --radius-pill: 999px;
  --space: 8px;
  --dur: 180ms; --dur-drawer: 200ms; --dur-fade: 160ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --font: -apple-system, "SF Pro Text", Inter, "Segoe UI", Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --rail-w: 232px; --rail-w-collapsed: 64px;
  --head-h: 64px; --tab-h: 56px;
  --content-max: 1280px; --gutter: 24px;

  /* `.select`'s chevron: an inline data URI (never an external request), coloured to match
     --ink-3 in each theme since a background-image cannot read currentColor. */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236F6B63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111110;   --paper-2: #1A1917;
  --ink: #F2EFE8;     --ink-2: #C9C4B8;     --ink-3: #8E897F;
  --line: #2A2825;    --line-2: #3A3733;
  --accent: #6E9BFF;  --accent-ink: #111110;  --accent-soft: rgba(110, 155, 255, .18);
  --income: #4CC38A;  --income-soft: rgba(76, 195, 138, .18);
  --spend-soft: rgba(242, 239, 232, .18);
  --invested: #9D93F0; --invested-soft: rgba(157, 147, 240, .18);
  --transfer: #A29D92; --transfer-soft: rgba(162, 157, 146, .18);
  --unresolved: #E39A3B; --unresolved-soft: rgba(227, 154, 59, .18);
  --danger: #F0656D;  --danger-soft: rgba(240, 101, 109, .18);
  --focus: #6E9BFF;
  --backdrop: rgba(0, 0, 0, .48);
  --shadow-hover: 0 4px 16px rgba(0, 0, 0, .36);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, .48);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E897F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #111110;   --paper-2: #1A1917;
    --ink: #F2EFE8;     --ink-2: #C9C4B8;     --ink-3: #8E897F;
    --line: #2A2825;    --line-2: #3A3733;
    --accent: #6E9BFF;  --accent-ink: #111110;  --accent-soft: rgba(110, 155, 255, .18);
    --income: #4CC38A;  --income-soft: rgba(76, 195, 138, .18);
    --spend-soft: rgba(242, 239, 232, .18);
    --invested: #9D93F0; --invested-soft: rgba(157, 147, 240, .18);
    --transfer: #A29D92; --transfer-soft: rgba(162, 157, 146, .18);
    --unresolved: #E39A3B; --unresolved-soft: rgba(227, 154, 59, .18);
    --danger: #F0656D;  --danger-soft: rgba(240, 101, 109, .18);
    --focus: #6E9BFF;
    --backdrop: rgba(0, 0, 0, .48);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, .36);
    --shadow-pop: 0 8px 28px rgba(0, 0, 0, .48);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E897F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}