/* Invoice Flow — single source of truth for the V3 interface theme.
   Change brand colors here; application and component styles consume these tokens. */
:root {
  /* typography */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: "Sora", "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --text-2xs: 10px;
  --text-xs: 11.5px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --lh-tight: 1.15;
  --lh-title: 1.22;
  --lh-body: 1.5;
  --fw-regular: 500;
  --fw-medium: 600;
  --fw-semibold: 700;
  --fw-bold: 700;

  /* ink / neutral text */
  --ink: #17161d;
  --ink-2: #343139;
  --muted: #706d66;
  --muted-2: #928e84;
  --faint: #c9c5bc;

  /* surfaces */
  --canvas: #eceae4;
  --panel: #faf9f5;
  --panel-2: #f1efe8;
  --panel-3: #e5e2da;
  --line: #dedbd2;
  --line-2: #ebe8e0;
  --line-3: #c9c5bc;

  /* sidebar rail */
  --rail: #17161d;
  --rail-2: #111016;
  --rail-ink: #faf9f5;
  --rail-muted: rgba(250, 249, 245, .62);
  --rail-line: rgba(250, 249, 245, .12);
  --rail-hover: rgba(250, 249, 245, .08);
  --rail-active: #28272d;
  --rail-active-ink: #ffffff;

  /* Invoice Flow brand */
  --accent: #3fbfae;
  --accent-2: #76d8cc;
  --accent-deep: #0d7a6f;
  --accent-soft: #e2f3f0;
  --accent-faint: #edf8f6;
  --accent-border: #b9ddd6;
  --accent-ring: rgba(63, 191, 174, .24);
  --accent-ink: #075d55;
  --accent-on: #17161d;
  --accent-on-deep: #ffffff;

  /* Status aliases. Success and attention intentionally stay in the brand family. */
  --lime: var(--accent-deep);
  --lime-soft: var(--accent-soft);
  --amber: var(--accent-deep);
  --amber-soft: var(--accent-soft);
  --coral: #dd4b30;
  --coral-soft: #fce9e4;
  --violet: #6d5cf5;
  --violet-soft: #ece9ff;

  /* elevation */
  --shadow-xs: 0 1px 1px rgba(23, 22, 29, .03);
  --shadow-sm: 0 1px 2px rgba(23, 22, 29, .05), 0 4px 14px rgba(23, 22, 29, .045);
  --shadow: 0 1px 2px rgba(23, 22, 29, .05), 0 12px 32px rgba(23, 22, 29, .07);
  --shadow-lg: 0 2px 6px rgba(23, 22, 29, .08), 0 18px 54px rgba(23, 22, 29, .15);
  --shadow-pop: 0 2px 4px rgba(23, 22, 29, .08), 0 8px 24px rgba(23, 22, 29, .12);

  /* radii + spacing scale */
  --r-xs: 6px;
  --r-sm: 8px;
  --r: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 20px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;

  /* control sizing + motion */
  --h-control-sm: 32px;
  --h-control: 36px;
  --h-control-lg: 42px;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --dur-fast: 120ms;
  --dur-base: 150ms;
  --dur-slow: 220ms;

  --sidebar-w: 280px;
  --sidebar-collapsed-w: 56px;
  --topbar-h: 56px;
}