/* FlowBoard design tokens - the shared visual language for every page.
   Loaded first on all pages. Existing per-file :root values (styles.css,
   theme.css) still win when loaded after this, so this only fills gaps and
   gives the card stylesheets one consistent set of radius/shadow/spacing. */

:root {
  /* Brand */
  --fb-accent: #0f7c72;
  --fb-accent-dark: #09524d;
  --fb-accent-alt: #6757d8;

  /* Ink + surfaces (light) */
  --fb-ink: #111827;
  --fb-muted: #64748b;
  --fb-surface: #ffffff;
  --fb-border: rgba(18, 31, 31, 0.10);

  /* Radius */
  --fb-radius-sm: 12px;
  --fb-radius: 18px;
  --fb-radius-lg: 24px;
  --fb-radius-pill: 999px;

  /* Elevation */
  --fb-shadow-sm: 0 6px 18px rgba(18, 31, 31, 0.06);
  --fb-shadow: 0 14px 38px rgba(18, 31, 31, 0.09);
  --fb-shadow-lg: 0 22px 58px rgba(18, 31, 31, 0.14);

  /* Spacing scale */
  --fb-gap-xs: 6px;
  --fb-gap-sm: 10px;
  --fb-gap: 16px;
  --fb-gap-lg: 24px;

  /* Font stack (Tajawal self-hosted via styles.css) */
  --fb-font: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  --fb-ink: #e5e7eb;
  --fb-muted: #94a3b8;
  --fb-surface: rgba(14, 23, 21, 0.72);
  --fb-border: rgba(255, 255, 255, 0.10);
  --fb-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.30);
  --fb-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
  --fb-shadow-lg: 0 22px 58px rgba(0, 0, 0, 0.40);
}