/* ───────────────────────────────────────────────────────────
   Adsbot Lens — brand token system
   Teal/cyan primary + dark navy shell, sibling to Adsbot.
   ─────────────────────────────────────────────────────────── */
:root {
  /* Brand teal (Adsbot family, anchored on #46A3AA) */
  --teal-50:  #eef6f7;
  --teal-100: #d8ebec;
  --teal-200: #b6dadc;
  --teal-300: #8cc3c7;
  --teal-400: #64aeb3;
  --teal-500: #46a3aa;   /* primary */
  --teal-600: #3a868c;
  --teal-700: #2f6b70;
  --teal-800: #265458;
  --teal-soft: #eef6f7;

  /* Charcoal shell (AdsbotSEO DS — warm near-black sidebar) */
  --sidebar:     #3b3737;
  --sidebar-2:   #2c2929;
  --navy-950: #1c1a1a;
  --navy-900: #232020;   /* sidebar base (kept as alias) */
  --navy-850: #2a2727;
  --navy-800: #322f2f;
  --navy-700: #3b3838;
  --navy-600: #4a4646;

  /* Accent secondary (deep ink used in Adsbot wordmark) */
  --ink: #18181b;

  /* Neutrals — true zinc grays (AdsbotSEO DS) */
  --bg:        #ffffff;
  --bg-muted:  #fafafa;
  --bg-subtle: #f5f5f5;
  --surface:   #ffffff;
  --surface-2: #fbfbfc;
  --border:    #ececec;
  --border-strong: #d4d4d8;
  --hairline:  #f0f0f0;

  --fg:        #18181b;
  --fg-strong: #09090b;
  --fg-muted:  #52525b;
  --fg-subtle: #71717a;
  --fg-faint:  #a1a1aa;

  /* Semantic */
  --success: #16a34a;
  --success-soft: #dcfce7;
  --warn:    #d97706;
  --warn-soft: #fef3c7;
  --danger:  #e0405b;
  --danger-soft: #fde7eb;
  --info:    var(--teal-600);

  /* Radii — AdsbotSEO DS scale */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadows — light, papery (AdsbotSEO DS) */
  --shadow-xs: 0 1px 2px rgba(16, 16, 24, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 16, 24, 0.06), 0 1px 2px rgba(16, 16, 24, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 16, 24, 0.06), 0 2px 4px rgba(16, 16, 24, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 16, 24, 0.08), 0 4px 8px rgba(16, 16, 24, 0.04);
  --shadow-teal: 0 4px 12px rgba(70, 163, 170, 0.18);
  --shadow-glow: 0 0 0 4px rgba(70, 163, 170, 0.14);

  /* Type — Inter throughout (AdsbotSEO DS) */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sidebar-w: 232px;
  --content-max: 1080px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg);
  background: var(--bg-muted);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* App shell grid */
.lens-shell {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  background: var(--bg-muted);
  font-family: var(--font-sans);
  color: var(--fg);
}

.lens-main {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* shared focus ring */
.focusable:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
}

/* entrance — kept simple & always-visible for reliable capture */
.fade-up { opacity: 1; }

@keyframes lensSpin { to { transform: rotate(360deg); } }
.lens-spin { animation: lensSpin .8s linear infinite; }