/* ============================================================
   CADENCE — Agency CRM & Marketing OS
   Design tokens + base styles
   ============================================================ */

:root {
  /* Type */
  --font-ui: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Radius (tweakable) */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Density (tweakable) — drives sidebar + row heights */
  --row-h: 38px;
  --pad-y: 14px;

  /* Accent (tweakable) — default Easy-Marketing dark blue. The picker only swaps
     --accent-h (hue); the deeper lightness here is what makes it a dark blue. */
  --accent-h: 264;
  --accent: oklch(0.49 0.18 var(--accent-h));
  --accent-hover: oklch(0.57 0.19 var(--accent-h));
  --accent-dark: oklch(0.33 0.13 var(--accent-h));
  --accent-soft: oklch(0.55 0.18 var(--accent-h) / 0.15);
  --accent-border: oklch(0.55 0.18 var(--accent-h) / 0.34);
  --accent-text: oklch(0.62 0.16 var(--accent-h));

  /* Semantic status colors (shared chroma family) */
  --success: oklch(0.74 0.15 158);
  --success-soft: oklch(0.74 0.15 158 / 0.14);
  --warning: oklch(0.80 0.13 78);
  --warning-soft: oklch(0.80 0.13 78 / 0.14);
  --danger: oklch(0.66 0.19 25);
  --danger-soft: oklch(0.66 0.19 25 / 0.14);
  --info: oklch(0.72 0.13 240);
  --info-soft: oklch(0.72 0.13 240 / 0.14);
  --teal: oklch(0.74 0.12 195);
  --pink: oklch(0.72 0.17 350);
}

/* ---------------- DARK THEME (default) ---------------- */
:root[data-theme="dark"] {
  --bg: oklch(0.165 0.012 264);
  --bg-grad: radial-gradient(1200px 600px at 80% -10%, oklch(0.24 0.04 285 / 0.35), transparent 60%);
  --surface: oklch(0.205 0.014 264);
  --surface-2: oklch(0.235 0.015 264);
  --elevated: oklch(0.255 0.016 264);
  --border: oklch(0.32 0.014 264);
  --border-soft: oklch(0.28 0.013 264);
  --text: oklch(0.97 0.004 264);
  --text-2: oklch(0.74 0.012 264);
  --text-3: oklch(0.58 0.012 264);
  --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.28);
  --shadow-lg: 0 12px 48px oklch(0 0 0 / 0.5);
  --track: oklch(0.30 0.012 264);
  color-scheme: dark;
}

/* ---------------- LIGHT THEME ---------------- */
:root[data-theme="light"] {
  --bg: oklch(0.975 0.004 264);
  --bg-grad: radial-gradient(1200px 600px at 80% -10%, oklch(0.80 0.06 285 / 0.25), transparent 60%);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.985 0.003 264);
  --elevated: oklch(1 0 0);
  --border: oklch(0.90 0.006 264);
  --border-soft: oklch(0.93 0.005 264);
  --text: oklch(0.22 0.015 264);
  --text-2: oklch(0.46 0.014 264);
  --text-3: oklch(0.60 0.012 264);
  --shadow: 0 1px 2px oklch(0.5 0.02 264 / 0.08), 0 8px 24px oklch(0.5 0.02 264 / 0.08);
  --shadow-lg: 0 16px 48px oklch(0.4 0.02 264 / 0.16);
  --track: oklch(0.92 0.006 264);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow: hidden; }

#root { height: 100vh; }

::selection { background: var(--accent-soft); color: var(--text); }

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--track);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; }

/* numeric / tabular */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Reusable atoms ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s, border-color .14s, transform .04s, color .14s;
}
.btn:hover { background: var(--elevated); border-color: var(--text-3); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  border-color: transparent;
  color: white;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-icon { padding: 8px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--surface-2);
  white-space: nowrap;
}
.chip-dot { width: 7px; height: 7px; border-radius: 99px; background: currentColor; }

.badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  text-transform: uppercase;
}

.divider { height: 1px; background: var(--border); border: 0; }

.scroll-y { overflow-y: auto; overflow-x: hidden; }

/* tooltips via title attr are native; small helper for truncation */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* focus ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

input, button, textarea, select { font-family: inherit; }

/* fade-in for view transitions */
@keyframes viewIn {
  from { transform: translateY(7px); }
  to { transform: none; }
}
/* NOTE: no animated transform on view roots — it breaks DOM-clone screenshots.
   Slide-overs (static off-screen transform) are fine. */
.view-enter { }

@keyframes slideOver {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Live status dot — expanding "ping" ring used for active/running indicators. */
.status-ping { position: absolute; inset: 0; border-radius: 99px; animation: statusPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes statusPing { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .status-ping { animation: none; } }