/* FlowDesk design system tokens (source: the FlowDesk Design System artifact, tokens.json).
   Two themes: light (paper) is the default; wrap a region in data-theme="forest" for the cutting-mat green. */
:root, [data-theme="light"] {
  --paper-100: #f6f5f3; --ink-900: #181818;
  --forest-900: #143528; --forest-800: #1a4332; --forest-700: #2f6b4f;
  --mint-300: #b8d4c5; --green-500: #1b4334; --yellow-300: #f4e937;

  --surface: var(--paper-100); --surface-raised: #fbfbfa; --surface-sunken: #efeeec; --border: #dfdedc;
  --ink: var(--ink-900); --ink-muted: #5c5b59; --ink-subtle: #737373; --eyebrow: #1a723f;
  --action: var(--green-500); --on-action: #ffffff;
  --action-quiet: #e9e4e0; --on-action-quiet: #14130e;
  --pill-light: #e7e8e2; --on-pill-light: var(--ink-900);
  --inverse: #262626; --on-inverse: #ffffff;
  --highlight: var(--yellow-300); --on-highlight: #2a1900;
  --focus: #15803d;

  --success: #16a34a; --success-ink: #15803d; --success-soft: #dcfce7;
  --danger: #ef4444; --danger-ink: #b91c1c; --danger-soft: #fee2e2;
  --warning: #ca8a04; --warning-ink: #a16207; --warning-soft: #fefce8;
  --info-soft: #dbeafe; --info-ink: #1d4ed8;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 40px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-button-light: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-window: 0 24px 64px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
[data-theme="forest"] {
  --surface: var(--forest-800); --surface-raised: var(--forest-700); --surface-sunken: var(--forest-900); --border: #2f5a46;
  --ink: var(--paper-100); --ink-muted: var(--mint-300); --ink-subtle: #9dbcad; --eyebrow: var(--mint-300);
  --action-quiet: #10281f; --on-action-quiet: #f6f5f3;
  --focus: var(--yellow-300);
}