/* Fox Todo design tokens. All colors, spacings, radii, shadows live here. */

:root {
  /* Brand. Softened from the punchy original orange to a calmer, To-Do-like tone. */
  --ft-orange: #e08a4f;
  --ft-orange-strong: #cf7438;
  --ft-orange-soft: #ffe7d6;
  /* Translucent accent washes for selected rows and hover states. */
  --ft-accent-wash: rgba(224, 138, 79, 0.16);
  --ft-accent-wash-soft: rgba(224, 138, 79, 0.09);

  /* Neutrals */
  --ft-near-black: #15171a;
  --ft-gray-900: #1f2226;
  --ft-gray-800: #2a2e34;
  --ft-gray-700: #3a3f47;
  --ft-gray-500: #6b7280;
  --ft-gray-400: #9aa1ab;
  --ft-gray-300: #cdd2d8;
  --ft-gray-200: #e3e6ea;
  --ft-gray-100: #f1f3f5;
  --ft-white: #ffffff;

  /* Semantic colors. Dark only, the app has no light mode. */
  --ft-bg: var(--ft-near-black);
  --ft-surface: var(--ft-gray-900);
  --ft-surface-2: var(--ft-gray-800);
  --ft-text: var(--ft-gray-100);
  --ft-text-muted: var(--ft-gray-400);
  --ft-border: var(--ft-gray-700);
  --ft-accent: var(--ft-orange);
  --ft-accent-strong: var(--ft-orange-strong);
  --ft-accent-contrast: var(--ft-near-black);
  --ft-focus: #6db3ff;

  /* Status colors */
  --ft-danger: #f2a59f;
  --ft-danger-bg: #3a1f1d;
  --ft-success: #9fd6b2;
  --ft-success-bg: #1c2e23;
  --ft-info: #9fc7e6;
  --ft-info-bg: #1b2a36;

  /* Spacing scale */
  --ft-space-1: 0.25rem;
  --ft-space-2: 0.5rem;
  --ft-space-3: 0.75rem;
  --ft-space-4: 1rem;
  --ft-space-5: 1.5rem;
  --ft-space-6: 2rem;
  --ft-space-7: 3rem;

  /* Radii */
  --ft-radius-sm: 4px;
  --ft-radius-md: 8px;
  --ft-radius-lg: 14px;
  --ft-radius-pill: 999px;

  /* Shadows */
  --ft-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --ft-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.55);

  /* Typography */
  --ft-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ft-line: 1.5;

  /* Layout */
  --ft-topbar-h: 56px;
  --ft-card-max: 26rem;

  /* App shell (Microsoft To Do style three-column layout) */
  --ft-sidebar-w: 290px;
  --ft-detail-w: 360px;
  --ft-appbar-h: 56px;
}