/* Floe Brand & App Design System Tokens (floelabs.org production web fonts) */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  /* Floe App Tokens (apps/web/src/styles/tokens.css) */
  --c-ground: #FAFAF8;
  --c-sidebar: #F3F4F2;
  --c-surface: #FFFFFF;
  --c-subtle: #F6F7F5;
  --c-line: #E2E5E1;
  --c-line-soft: #EEF0ED;
  --c-line-strong: #D5D9D4;
  --c-control-line: #858D87;
  --c-ink: #14181B;
  --c-ink-2: #4A5258;
  --c-ink-3: #626B73;
  --c-accent: #1D5C78;
  --c-accent-hover: #14445A;
  --c-accent-tint: #E6EFF3;
  --c-on-accent: #FFFFFF;
  --c-select: #EEF4F6;
  --c-select-line: #B9CFD9;
  --c-ok: #2E6B4C;
  --c-ok-tint: #E7F1EB;
  --c-warn: #8A5300;
  --c-warn-tint: #F7EEDD;
  --c-warn-bar: #C98A2B;
  --c-error: #A1352B;
  --c-error-tint: #F6EBEA;
  --c-neutral: #9AA3A9;

  --r-card: 12px;
  --r-tile: 10px;
  --r-ctl: 8px;
  --r-pill: 99px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --pad-card: 24px;
  --pad-page-y: 32px;
  --pad-page-x: 40px;
  --gap-section: 24px;
  --touch: 40px;
  --touch-lg: 44px;

  --f-sans: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --t-base: 14px;
  --t-h1: 26px;
  --t-section: 15px;
  --t-sm: 13px;
  --t-label: 12px;
  --t-group: 11px;

  /* design-agent --brand-* aliases */
  --brand-font-display: "IBM Plex Sans", system-ui, sans-serif;
  --brand-font-text: "IBM Plex Sans", system-ui, sans-serif;
  --brand-font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --brand-color-ground: #fafaf8;
  --brand-color-sidebar: #f3f4f2;
  --brand-color-surface: #ffffff;
  --brand-color-subtle: #f6f7f5;
  --brand-color-line: #e2e5e1;
  --brand-color-line-soft: #eef0ed;
  --brand-color-line-strong: #d5d9d4;
  --brand-color-control-line: #858d87;
  --brand-color-ink: #14181b;
  --brand-color-ink-2: #4a5258;
  --brand-color-ink-3: #626b73;
  --brand-color-accent: #1d5c78;
  --brand-color-accent-hover: #14445a;
  --brand-color-accent-tint: #e6eff3;
  --brand-color-on-accent: #ffffff;
  --brand-color-select: #eef4f6;
  --brand-color-select-line: #b9cfd9;
  --brand-color-ok: #2e6b4c;
  --brand-color-ok-tint: #e7f1eb;
  --brand-color-warn: #8a5300;
  --brand-color-warn-tint: #f7eedd;
  --brand-color-warn-bar: #c98a2b;
  --brand-color-error: #a1352b;
  --brand-color-error-tint: #f6ebea;
  --brand-color-neutral: #9aa3a9;
  --brand-radius-card: 12px;
  --brand-radius-tile: 10px;
  --brand-radius-ctl: 8px;
  --brand-radius-pill: 99px;
  --brand-space-unit: 8px;
  --brand-stroke: 2px;
}