@import url("/shared/tokens.css");

body[data-vyra-playground="true"] {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-vyra-playground="true"] :where(h1, h2, h3, h4, h5) {
  color: var(--text);
  letter-spacing: -0.01em;
}

body[data-vyra-playground="true"] :where(p, li, small, span) {
  color: var(--text-muted);
}

body[data-vyra-playground="true"] :where(.demo-shell, .demo-topbar, .demo-action-bar) {
  margin-bottom: clamp(24px, 3vw, 40px);
}

body[data-vyra-playground="true"] :where(.demo-topbar) {
  background: color-mix(in srgb, var(--surface) 80%, transparent 20%);
}

body[data-vyra-playground="true"] :where(.demo-topbar-title) {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

body[data-vyra-playground="true"] :where(.demo-shell-title h1) {
  margin: 0;
  letter-spacing: -0.02em;
}

body[data-vyra-playground="true"] :where(.demo-shell-title .eyebrow) {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--text-3);
}

/* Playground logo contract:
   - Demo shell product mark: .demo-logo.demo-logo--product (use product SVG when available).
   - Topbar/overview mark: .demo-logo.demo-logo--badge (Vyra badge).
   - Wordmarks: .demo-logo.demo-logo--wordmark (height-only).
   All logos preserve aspect ratio via object-fit: contain; never stretch. */

body[data-vyra-playground="true"] :where(.demo-shell-header) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 24px);
}

body[data-vyra-playground="true"] :where(.demo-shell-actions) {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

body[data-vyra-playground="true"] :where(.demo-shell-actions .btn) {
  padding: 8px 18px;
}

body[data-vyra-playground="true"] :where(.btn, button, a.btn) {
  border-radius: 999px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

body[data-vyra-playground="true"] :where(.btn:disabled, button:disabled, .btn[aria-disabled="true"]) {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

body[data-vyra-playground="true"] :where(.card, .demo-panel, .panel, .demo-shell-grid > div) {
  border-radius: var(--radius-2);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  background: var(--surface);
}

body[data-vyra-playground="true"] :where(.demo-shell-grid) {
  gap: clamp(16px, 2vw, 24px);
}

body[data-vyra-playground="true"] :where(.demo-action-bar) {
  border-radius: var(--radius-2);
  border: 1px solid var(--border);
  background: var(--surface-2);
  padding: clamp(16px, 2vw, 24px);
  box-shadow: var(--shadow-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 24px);
}

body[data-vyra-playground="true"] :where(.demo-action-buttons) {
  gap: 12px;
  display: flex;
  flex-wrap: wrap;
}

body[data-vyra-playground="true"] :where(.demo-topbar .badge, .badge) {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
}

body[data-vyra-playground="true"] :where(.hero-mark, .brand-badge, .brand-wordmark) {
  background: transparent;
  object-fit: contain;
}

body[data-vyra-playground="true"] :where(.product-mark) {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

body[data-vyra-playground="true"] :where(.product-icon, .demo-logo) {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

body[data-vyra-playground="true"] :where(.demo-logo--badge) {
  width: 40px;
  height: 40px;
}

body[data-vyra-playground="true"] :where(.demo-logo--product) {
  height: 34px;
  width: auto;
  max-width: 180px;
}

body[data-vyra-playground="true"] :where(.demo-logo--wordmark) {
  height: 28px;
  width: auto;
  max-width: 200px;
}

body[data-vyra-playground="true"] :where(.demo-shell-list) {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}