@import 'tailwindcss';

/* =============================================================================
   DESIGN SYSTEM: "Tech Indigo" - Linear-inspired minimal theme
   
   PRIMARY ACCENT: Indigo-600 (#4f46e5) - ONLY for interactive elements
   BACKGROUNDS: Pure white (#ffffff) or Slate-50 (#f8fafc) - NO blue tints
   TEXT: Slate-900 (headers), Slate-600 (body) - Monochrome only
   ============================================================================= */

@theme {
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* Border Radius - Tight, modern corners */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;

  /* ==========================================================================
     COLOR PALETTE - Strict monochrome + single accent
     ========================================================================== */

  /* Backgrounds - warm greige, no blue tint */
  --color-background: #f8f6f2;
  --color-card: #f8f6f2;
  --color-secondary: #f1eee7; /* subtle warm sections */
  --color-muted: #e9e5db; /* warm hover states */

  /* Text - warm ink scale */
  --color-foreground: #201d18; /* Headers */
  --color-card-foreground: #201d18;
  --color-secondary-foreground: #6a655a; /* Body text */
  --color-muted-foreground: #9a9488; /* Muted/placeholder */

  /* PRIMARY ACCENT - GetIntel violet (Interactive elements ONLY) */
  --color-primary: #6d5ef0;
  --color-primary-hover: #5a4bd9;
  --color-primary-foreground: #ffffff;

  /* Accent - Same as primary */
  --color-accent: #6d5ef0;
  --color-accent-foreground: #ffffff;

  /* Borders - warm gray */
  --color-border: #ddd8ce;
  --color-input: #ddd8ce;

  /* Focus ring - violet */
  --color-ring: #6d5ef0;

  /* Semantic colors — tied to analytics.css's --st-good/--st-bad/--st-warn so
     the two design systems can never drift out of sync again. */
  --color-destructive: var(--st-bad);
  --color-destructive-foreground: #ffffff;
  --color-success: var(--st-good);
  --color-success-foreground: #ffffff;
  --color-warning: var(--st-warn);
  --color-warning-foreground: #ffffff;

  /* ==========================================================================
     PALETTE RE-SKIN (2026-07 warm-violet redesign) — most of the app (~80
     files) was built directly against Tailwind's stock slate/white/indigo/
     emerald/red/amber/rose utilities (bg-white, text-slate-500, bg-emerald-50,
     etc.), NOT the --color-background/-foreground tokens above. Overriding
     Tailwind's OWN palette tokens here — instead of hand-editing every
     className string in ~80 files — re-skins every one of them at once, with
     zero risk of a missed spot. Every value is a var() against the single
     source of truth (analytics.css's :root tokens), so light/dark, and any
     future palette tweak, stays correct everywhere without a second edit.
     Scoped to the families actually used as STRUCTURAL neutrals + the 3
     semantic states + the old indigo accent. Low-volume one-off categorical
     hues (blue/orange/purple/yellow/pink/green — used to tell distinct
     content-type tags apart, e.g. CompetitorIntelPage's POST_CATEGORY_VISUALS)
     are deliberately left at Tailwind's defaults: remapping them risks
     collapsing two currently-distinct categories onto the same color. */
  --color-white: var(--surface);
  --color-slate-50: var(--surface-2);
  --color-slate-100: var(--hover);
  --color-slate-200: var(--border);
  --color-slate-300: var(--border-strong);
  --color-slate-400: var(--text-faint);
  --color-slate-500: var(--text-muted);
  --color-slate-600: var(--text-muted);
  --color-slate-700: var(--text);
  --color-slate-800: var(--text);
  --color-slate-900: var(--text);
  --color-slate-950: var(--text);

  /* Indigo was the OLD accent (bg-indigo-600 etc, hand-picked directly rather
     than through --color-primary) — retarget it to the same violet brand
     accent so every indigo-* usage matches the new system automatically. */
  --color-indigo-50: var(--accent-soft);
  --color-indigo-100: var(--accent-soft);
  --color-indigo-200: var(--accent-soft-bd);
  --color-indigo-300: color-mix(in srgb, var(--accent) 45%, var(--surface));
  --color-indigo-400: color-mix(in srgb, var(--accent) 70%, var(--surface));
  --color-indigo-500: var(--accent);
  --color-indigo-600: var(--accent);
  --color-indigo-700: var(--accent);
  --color-indigo-800: var(--accent-text);
  --color-indigo-900: var(--accent-text);

  /* Semantic triad — good/bad/warn tints + solids, used throughout for
     verdict badges, alerts, and status pills. */
  --color-emerald-50: color-mix(in srgb, var(--st-good) 14%, var(--surface));
  --color-emerald-100: color-mix(in srgb, var(--st-good) 22%, var(--surface));
  --color-emerald-500: var(--st-good);
  --color-emerald-600: var(--st-good);
  --color-emerald-700: var(--st-good);

  --color-red-50: color-mix(in srgb, var(--st-bad) 14%, var(--surface));
  --color-red-100: color-mix(in srgb, var(--st-bad) 22%, var(--surface));
  --color-red-500: var(--st-bad);
  --color-red-600: var(--st-bad);
  --color-red-700: var(--st-bad);

  --color-amber-50: color-mix(in srgb, var(--st-warn) 14%, var(--surface));
  --color-amber-100: color-mix(in srgb, var(--st-warn) 22%, var(--surface));
  --color-amber-500: var(--st-warn);
  --color-amber-600: var(--st-warn);
  --color-amber-700: var(--st-warn);

  --color-rose-50: color-mix(in srgb, var(--st-bad) 14%, var(--surface));
  --color-rose-100: color-mix(in srgb, var(--st-bad) 22%, var(--surface));
  --color-rose-500: var(--st-bad);
  --color-rose-600: var(--st-bad);
  --color-rose-700: var(--st-bad);
}

/* =============================================================================
   DARK THEME — complete the half-built dark mode.

   The analytics design system (analytics.css) flips its own tokens
   (--surface/--text/…) via ThemeProvider's data-theme, but these legacy
   --color-* tokens were light-only. Result in dark mode: white .card + html/body
   (var(--color-card/background)) under light-inheriting analytics text = washed
   out, unreadable tables. Mirror the analytics dark palette onto the legacy
   tokens so the whole app flips together. LIGHT MODE IS UNTOUCHED — this only
   overrides when the resolved theme is dark, matching how analytics.css gates
   its own dark block (OS pref, unless the user explicitly toggled light).
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-background: #14120f;
    --color-card: #1c1a16;
    --color-secondary: #23201b;
    --color-muted: #2a2620;
    --color-foreground: #ece8e0;
    --color-card-foreground: #ece8e0;
    --color-secondary-foreground: #a29c8e;
    --color-muted-foreground: #6c665a;
    --color-border: #34302a;
    --color-input: #34302a;
    /* Lighter accent for dark: violet-600 is too dark for link text / rings on
       a near-black ground. Matches analytics.css's dark --accent. */
    --color-primary: #8a7cf5;
    --color-primary-hover: #ab9ffb;
    --color-accent: #8a7cf5;
    --color-ring: #8a7cf5;
  }
}
:root[data-theme='dark'] {
  --color-background: #14120f;
  --color-card: #1c1a16;
  --color-secondary: #23201b;
  --color-muted: #2a2620;
  --color-foreground: #ece8e0;
  --color-card-foreground: #ece8e0;
  --color-secondary-foreground: #a29c8e;
  --color-muted-foreground: #6c665a;
  --color-border: #34302a;
  --color-input: #34302a;
  --color-primary: #8a7cf5;
  --color-primary-hover: #ab9ffb;
  --color-accent: #8a7cf5;
  --color-ring: #8a7cf5;
}

/* Links read a step brighter than the fill accent on dark, so they pop without
   paling out button backgrounds (which keep --color-primary at #8a7cf5). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) a.link,
  :root:not([data-theme='light']) .text-link { color: #ab9ffb; }
  :root:not([data-theme='light']) a.link:hover,
  :root:not([data-theme='light']) .text-link:hover { color: #c6bffc; }
}
:root[data-theme='dark'] a.link,
:root[data-theme='dark'] .text-link { color: #ab9ffb; }
:root[data-theme='dark'] a.link:hover,
:root[data-theme='dark'] .text-link:hover { color: #c6bffc; }

/* =============================================================================
   BASE STYLES
   ============================================================================= */

html,
body {
  background-color: var(--color-background);
  color: var(--color-secondary-foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  overflow-y: scroll;
  overscroll-behavior: none;
}

/* Headers use darker text */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-foreground);
}

/* =============================================================================
   FOCUS STATES - Indigo ring
   ============================================================================= */

*:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* =============================================================================
   MIGRATION OVERRIDES - Map old dark theme classes to new light theme
   ============================================================================= */

@layer utilities {
  /* Background overrides */
  .bg-slate-900 {
    background-color: var(--color-background) !important;
  }
  .bg-slate-900\/50 {
    background-color: var(--color-background) !important;
  }
  .bg-slate-800 {
    background-color: var(--color-card) !important;
  }
  .bg-slate-800\/50 {
    background-color: var(--color-secondary) !important;
  }
  .bg-slate-700 {
    background-color: var(--color-muted) !important;
  }

  /* Border overrides */
  .border-slate-700 {
    border-color: var(--color-border) !important;
  }
  .border-slate-800 {
    border-color: var(--color-border) !important;
  }

  /* Text overrides - Slate shades (keep monochrome) */
  .text-slate-400 {
    color: var(--color-muted-foreground) !important;
  }
  .text-slate-500 {
    color: var(--color-muted-foreground) !important;
  }

  /* Cyan → Indigo (for links, active states) */
  .text-cyan-400 {
    color: var(--color-primary) !important;
  }
  .text-cyan-500 {
    color: var(--color-primary) !important;
  }
  .text-cyan-600 {
    color: var(--color-primary) !important;
  }

  /* Semantic colors */
  .text-emerald-400 {
    color: var(--color-success) !important;
  }
  .text-emerald-500 {
    color: var(--color-success) !important;
  }
  .text-red-400 {
    color: var(--color-destructive) !important;
  }
  .text-amber-400 {
    color: var(--color-warning) !important;
  }

  /* Gradient buttons → solid Indigo */
  .from-cyan-600,
  .from-cyan-500,
  .from-emerald-600,
  .from-indigo-600 {
    background-color: var(--color-primary) !important;
    background-image: none !important;
  }

  /* Hover states for gradients */
  .hover\:from-cyan-500:hover,
  .hover\:from-emerald-500:hover {
    background-color: var(--color-primary-hover) !important;
  }
}

/* =============================================================================
   COMPONENT STYLES
   ============================================================================= */

/* Card */
.card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Primary Button - Solid Indigo */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.875rem;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Secondary Button - White with border */
.btn-secondary {
  background-color: var(--color-card);
  color: var(--color-secondary-foreground);
  border: 1px solid var(--color-border);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.875rem;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: var(--color-secondary);
}

/* Ghost Button */
.btn-ghost {
  background-color: transparent;
  color: var(--color-secondary-foreground);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.875rem;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.btn-ghost:hover {
  background-color: var(--color-muted);
}

/* Link style - Indigo accent */
a.link,
.text-link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

a.link:hover,
.text-link:hover {
  color: var(--color-primary-hover);
}

/* Badge - Primary variant */
.badge-primary {
  background-color: #ebe7fa; /* violet-tinted soft, matches --accent-soft */
  color: var(--color-primary);
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Active/Selected states */
.active-tab,
[data-state='active'] {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Input focus */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* =============================================================================
   IA REDESIGN MOTION (Lane D)
   ============================================================================= */

/* Watch — Currently Running emerald border-left subtle pulse while active.
   rgba is emerald-500 (#10b981 → 16,185,129). Green = healthy/alive. */
@keyframes watch-live-pulse {
  0%, 100% {
    box-shadow: -2px 0 0 0 rgba(16, 185, 129, 0);
  }
  50% {
    box-shadow: -2px 0 0 0 rgba(16, 185, 129, 0.35);
  }
}

.watch-live-pulse {
  animation: watch-live-pulse 2.4s ease-in-out infinite;
}

/* LedgerRow — transient ring after a state-change action lands.
   Rendered when `data-row-action-flash` is present on the card. */
@keyframes row-action-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.45);
  }
  100% {
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0);
  }
}

[data-row-action-flash='true'] {
  animation: row-action-flash 600ms ease-out;
}

/* LedgerRow — expanded section slide-down */
.ledger-expand-enter {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 200ms ease-out, opacity 200ms ease-out;
}

.ledger-expand-active {
  max-height: 2000px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .watch-live-pulse,
  [data-row-action-flash='true'] {
    animation: none !important;
  }
  .ledger-expand-enter {
    transition: none !important;
  }
}

/* Analytics design-system port — imported LAST so its component classes
   (.card/.link/.panel/.cell/etc.) win any equal-specificity collisions with
   the app's pre-existing Tailwind-authored component styles above. */
@import "./analytics.css";