/* fsq-tokens.css - FSQ component design tokens, light and dark in one file (FSQ-authored). Adapted from the mERP UI library; provenance in the FSQ Brain (brain/ui/fsq_ui_registry.md). */

:root {
  /* surfaces + text */
  --fsq-surface: #fff;
  --fsq-surface-alt: #f8f9fa;
  --fsq-surface-hover: #f8f9fa;
  --fsq-border: #e9ecef;
  --fsq-border-soft: #f0f0f0;
  --fsq-text: #212529;
  --fsq-text-2: #495057;
  --fsq-text-muted: #5f666d;
  --fsq-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  /* brand ink, focus and the brand chip pair (--fsq-brand, --fsq-focus, --fsq-brand-bg/-fg) are defined in fsq-brand.css (#181) */

  /* badge / pill pairs (background, foreground) */
  --fsq-ok-bg: #d1fae5;      --fsq-ok-fg: #065f46;
  --fsq-warn-bg: #fef3c7;    --fsq-warn-fg: #92400e;
  --fsq-info-bg: #dbeafe;    --fsq-info-fg: #1d4ed8;
  --fsq-danger-bg: #fee2e2;  --fsq-danger-fg: #991b1b;
  --fsq-muted-bg: #f3f4f6;   --fsq-muted-fg: #4b5563;
  --fsq-violet-bg: #ede9fe;  --fsq-violet-fg: #6d28d9;
  --fsq-pink-bg: #fce7f3;    --fsq-pink-fg: #be185d;

  /* demo notice (gallery + demo-only forms) */
  --fsq-demo-bg: #fff8e1;
  --fsq-demo-border: #f0d98a;
  --fsq-demo-fg: #6b5510;
}

[data-merp-theme="dark"] {
  --fsq-surface: var(--merp-clr-card-bg, #1e2128);
  --fsq-surface-alt: #1a1d23;
  --fsq-surface-hover: #22252b;
  --fsq-border: var(--merp-clr-card-border, #2d3039);
  --fsq-border-soft: #2d3039;
  --fsq-text: #d1d5db;
  --fsq-text-2: #9ca3af;
  --fsq-text-muted: #9ca3af;
  --fsq-shadow: none;
  /* dark brand ink / focus / brand chip pair: fsq-brand.css (#181) */

  --fsq-ok-bg: #14321f;      --fsq-ok-fg: #86efac;
  --fsq-warn-bg: #3a2f14;    --fsq-warn-fg: #f0c879;
  --fsq-info-bg: #1e3a5f;    --fsq-info-fg: #93c5fd;
  --fsq-danger-bg: #3a1f1d;  --fsq-danger-fg: #f5a8a2;
  --fsq-muted-bg: #2a2f3a;   --fsq-muted-fg: #aab3c2;
  --fsq-violet-bg: #2c1f42;  --fsq-violet-fg: #c4a2f0;
  --fsq-pink-bg: #3b1d2f;    --fsq-pink-fg: #f9a8d4;

  --fsq-demo-bg: #2a2412;
  --fsq-demo-border: #5a4a1c;
  --fsq-demo-fg: #f0c879;
}

/* Muted text that keeps its contrast in dark (the shell forces Bootstrap .text-muted to #6b7280, about 3.7:1). */
.fsq-muted { color: var(--fsq-text-muted); }