/* =========================================================
   FindAgent design tokens — the single source of the brand palette,
   typography, borders, shadows and shadcn aliases. Consumed by the app,
   landing, bot and status page so every surface renders identically.

   Light theme is the default (:root); [data-theme='dark'] flips it.
   Import this ONCE at the top of a consumer's global stylesheet
   (before @tailwind), or link it directly in a non-Tailwind page.
   ========================================================= */
:root,
[data-theme='light'] {
  /* Fonts — a consumer may override --font-sans / --font-mono (e.g. next/font
     sets --font-geist-sans); the fallback chain renders a correct system face. */
  --font-sans: var(--font-geist-sans, ui-sans-serif, system-ui, sans-serif);
  --font-mono: var(--font-geist-mono, ui-monospace, 'SF Mono', Menlo);

  /* Surfaces */
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-subtle: #fafafa;
  --bg-muted: #f4f4f5;
  --bg-hover: #f4f4f5;
  --bg-active: #e4e4e7;
  --bg-inverse: #0a0a0a;

  /* Foreground */
  --fg: #18181b;
  --fg-strong: #0a0a0a;
  --fg-muted: #71717a;
  /* --fg-subtle is secondary TEXT (hints, timestamps, placeholders) — must clear
     WCAG 4.5:1; borders/decorative use --border, not this. */
  --fg-subtle: #6b7280;
  --fg-on-accent: #ffffff;

  /* Borders */
  --border: #e4e4e7;
  --border-strong: #d4d4d8;

  /* Brand — the monochrome Industry-lens accent */
  --brand-accent: #18181b;
  --brand-accent-hover: #27272a;
  --brand-accent-soft: #f4f4f5;
  --brand-accent-fg: #0a0a0a;

  /* Discipline-axis accent (the second browse lens) — color-distinct from the
     monochrome brand accent so the two axes read apart. Indigo #4f46e5 vs #fff
     text = 7.0:1 (AA + AAA). */
  --accent-2: #4f46e5;
  --accent-2-hover: #4338ca;
  --accent-2-soft: #eef2ff;
  --accent-2-fg: #ffffff;

  /* Status */
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.08);
  --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.12);
  --shadow-pop: 0 20px 60px rgba(10, 10, 10, 0.18);
}

/* =========================================================
   Dark theme
   ========================================================= */
[data-theme='dark'] {
  --bg: #0a0a0a;
  --bg-elevated: #161618;
  --bg-subtle: #111113;
  --bg-muted: #1f1f23;
  --bg-hover: #1f1f23;
  --bg-active: #2a2a2f;
  --bg-inverse: #ffffff;

  --fg: #fafafa;
  --fg-strong: #ffffff;
  --fg-muted: #a1a1aa;
  /* Stays below --fg-muted so the muted > subtle hierarchy holds; clears 4.5:1. */
  --fg-subtle: #8b8b94;
  --fg-on-accent: #0a0a0a;

  --border: #27272a;
  --border-strong: #3f3f46;

  --brand-accent: #fafafa;
  --brand-accent-hover: #ffffff;
  --brand-accent-soft: #1f1f23;
  --brand-accent-fg: #ffffff;

  /* Discipline accent, dark. Indigo #818cf8 vs #0a0a0a text = 8.6:1 (AA + AAA). */
  --accent-2: #818cf8;
  --accent-2-hover: #a5b4fc;
  --accent-2-soft: #1e1b3a;
  --accent-2-fg: #0a0a0a;

  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* =========================================================
   shadcn/ui token aliases — map shadcn names to ours so shadcn
   components Just Work under either naming scheme.
   ========================================================= */
:root,
[data-theme='light'],
[data-theme='dark'] {
  --background: var(--bg);
  --foreground: var(--fg);
  --card: var(--bg-elevated);
  --card-foreground: var(--fg);
  --popover: var(--bg-elevated);
  --popover-foreground: var(--fg);
  --primary: var(--brand-accent);
  --primary-foreground: var(--fg-on-accent);
  --secondary: var(--bg-muted);
  --secondary-foreground: var(--fg);
  --muted: var(--bg-muted);
  --muted-foreground: var(--fg-muted);
  --accent-shadcn: var(--bg-hover);
  --accent-shadcn-foreground: var(--fg);
  --destructive: var(--danger);
  --destructive-foreground: #ffffff;
  --input: var(--border);
  --ring: var(--brand-accent);
  --radius: 0.5rem;
}