/* ContentOps — design tokens. Every screen file imports this. */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Color ──────────────────────────────────────── */
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --surface-2: #F5F5F4;
  --surface-3: #E7E5E4;
  --border: #E7E5E4;
  --border-strong: #D6D3D1;

  --text: #1C1917;
  --text-muted: #57534E;
  --text-subtle: #A8A29E;

  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --accent-bg: #EEF2FF;
  --accent-border: #C7D2FE;

  --success: #15803D;
  --success-bg: #DCFCE7;
  --success-border: #BBF7D0;

  --warning: #B45309;
  --warning-bg: #FEF3C7;
  --warning-border: #FDE68A;

  --danger: #B91C1C;
  --danger-bg: #FEE2E2;
  --danger-border: #FECACA;

  --info: #1D4ED8;
  --info-bg: #DBEAFE;
  --info-border: #BFDBFE;

  /* Stone scale (for state dots / muted) */
  --stone-400: #A8A29E;
  --stone-500: #78716C;

  /* Platform brand colors (subtle, for chips/dots) */
  --platform-linkedin: #0A66C2;
  --platform-facebook: #1877F2;
  --platform-x: #000000;

  /* ── Type ───────────────────────────────────────── */
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-display: 36px;

  --lh-xs: 14px;
  --lh-sm: 16px;
  --lh-base: 18px;
  --lh-md: 20px;
  --lh-lg: 24px;
  --lh-xl: 26px;
  --lh-2xl: 28px;
  --lh-3xl: 34px;
  --lh-display: 42px;

  /* ── Radius ─────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 9999px;

  /* ── Elevation ──────────────────────────────────── */
  --e0: 0 0 0 1px var(--border);
  --e1: 0 1px 2px rgba(17, 12, 5, 0.06), 0 0 0 1px var(--border);
  --e2: 0 4px 12px rgba(17, 12, 5, 0.08), 0 0 0 1px var(--border);
  --e3: 0 12px 32px rgba(17, 12, 5, 0.12), 0 0 0 1px var(--border);
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.18);

  /* ── Spacing ────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── App geometry ───────────────────────────────── */
  --sidebar-w: 240px;
  --topbar-h: 48px;
}

/* ── Reset / base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; }

/* utilities */
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* scrollbars in design frames */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
::-webkit-scrollbar-track { background: transparent; }