/* ============================================================================
 * Synapse Design Tokens
 *
 * Single source of truth for colors, typography, radii, shadows, and motion.
 * This file is the IDENTICAL copy from the C2S/Synapse app at
 *   catapult_to_sage_app/frontend/src/styles/design-tokens.css.
 * Keep them in sync — edit BOTH when changing a value here.
 *
 * To re-skin the entire site, change values here. Tailwind utilities like
 * `bg-bg`, `text-accent`, `shadow-accent` are wired to these via the inline
 * tailwind.config in base.html.
 * ============================================================================ */

:root {
  /* Surfaces */
  --bg:            #09090b;            /* zinc-950 — page background */
  --surface:       #18181b;            /* zinc-900 — card/panel background */
  --surface-soft:  rgba(24, 24, 27, 0.5);  /* drop zones, sub-panels */
  --surface-alt:   rgba(0, 0, 0, 0.4);     /* sticky/sidebar with backdrop-blur */

  /* Borders */
  --border-subtle:  rgba(255, 255, 255, 0.1);   /* hairline dividers */
  --border-strong:  rgba(255, 255, 255, 0.2);   /* dashed dropzone */

  /* Accent — cyan glow */
  --accent:               #5fe3ff;
  --accent-hover:         #a5f3ff;
  --accent-strong:        #5fe3ff;
  --accent-soft-bg:       rgba(0, 212, 255, 0.08);
  --accent-soft-bg-hover: rgba(0, 212, 255, 0.04);
  --accent-soft-border:   rgba(0, 212, 255, 0.25);
  --accent-soft-text:     rgba(0, 212, 255, 0.9);
  --accent-soft-tint:     rgba(0, 212, 255, 0.1);
  --accent-soft-edge:     rgba(0, 212, 255, 0.2);
  --accent-glow-text:     0 0 12px rgba(0, 212, 255, 0.45);
  --accent-glow-button:   0 0 24px rgba(0, 212, 255, 0.35);
  --accent-glow-strong:   0 0 32px rgba(0, 212, 255, 0.5);
  --accent-glow-dot:      0 0 6px #00d4ff;

  /* Status */
  --success:       #22c55e;
  --warn:          #f59e0b;
  --danger:        #ef4444;

  /* Typography */
  --font-sans:     system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii */
  --radius-sm:     0.5rem;
  --radius-md:     0.75rem;
  --radius-lg:     1rem;
  --radius-xl:     1.5rem;
  --radius-pill:   9999px;

  /* Motion */
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.2s ease;
}