/* =============================================================================
   Sample Blocks Design System Theme
   Registry UI theme. Fonts and colours are lifted from `blocks/base.css`, which
   is the single source of truth for the sample blocks' tokens.
   ============================================================================= */

/* ── Typefaces used by the blocks ─────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Cal+Sans&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@300;400&display=swap");

/* ── Tokens (mirrors :root in blocks/base.css) ────────────────────────────── */
:root {
  --sample-ink:             #161616;
  --sample-muted:           #5c5c5c;
  --sample-faint:           #8a8a8a;
  --sample-ground:          #f5f5f5;
  --sample-surface:         #ffffff;
  --sample-border:          #e3e3e3;
  --sample-accent:          #2b59ff;
  --sample-accent-hover:    #1f47d9;
  --sample-accent-contrast: #ffffff;
  --sample-accent-soft:     #eef1ff;
  --sample-success:         #3f9b2b;
  --sample-star:            #f3c60d;

  --sample-font-display: 'Cal Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sample-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sample-font-mono:    'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ── App-wide font ────────────────────────────────────────────────────────── */
body {
  font-family: var(--sample-font-body);
  color: var(--sample-ink);
}

/* ── Handoff app chrome — accent / highlight colour ───────────────────────── */

/* Primary accent used across the app UI (replaces Tailwind sky-600) */
.text-sky-600 {
  color: var(--sample-accent) !important;
}

/* Active sidebar nav item */
div > ul > li > a.group[data-active] {
  background-color: var(--sample-accent);
  color: var(--sample-accent-contrast);
}

/* Active sidebar item (data attribute variant) */
.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
  color: var(--sample-accent-hover);
  background-color: var(--sample-accent-soft);
}

/* Copy / action button */
div.grid > div.flex > button.bg-gray-800 {
  background-color: var(--sample-ink);
}

/* ── App top navigation bar ───────────────────────────────────────────────── */
body > div > div > div.sticky.z-50 {
  background-color: var(--sample-surface);
  box-shadow: none;
  border-bottom: 1px solid var(--sample-border);
}

/* ── Hide the decorative background gradient of the Handoff default theme ─── */
body > div > div > div.absolute {
  display: none;
}

/* ── Page title area ──────────────────────────────────────────────────────── */
div.flex h1 + p.text-lg {
  font-weight: 400;
  max-width: 780px;
  margin-top: 10px;
  margin-bottom: 40px;
  color: var(--sample-muted);
}

h1 + div.mt-3 > p {
  max-width: 600px;
  font-weight: 400;
  color: var(--sample-muted);
}