@import 'tailwindcss';

/* App background and card helpers */
@layer base {
  html,
  body,
  #app {
    height: 100%;
  }
  body {
    @apply bg-slate-50 text-slate-800;
  }

  /* Record&Replay builder design tokens */
  .rr-theme {
    --rr-bg: #f8fafc;
    --rr-topbar: rgba(255, 255, 255, 0.9);
    --rr-card: #ffffff;
    --rr-elevated: #ffffff;
    --rr-border: #e5e7eb;
    --rr-subtle: #f3f4f6;
    --rr-hover: #eef2f7;
    --rr-text: #0f172a;
    --rr-text-secondary: #334155;
    --rr-text-weak: #475569;
    --rr-muted: #64748b;
    --rr-brand: #7c3aed;
    --rr-brand-strong: #5b21b6;
    --rr-accent: #0ea5e9;
    --rr-success: #10b981;
    --rr-warn: #f59e0b;
    --rr-danger: #ef4444;
    --rr-dot: rgba(2, 6, 23, 0.08);
  }
  .rr-theme[data-theme='dark'] {
    --rr-bg: #0b1020;
    --rr-topbar: rgba(12, 15, 24, 0.8);
    --rr-card: #0f1528;
    --rr-elevated: #121a33;
    --rr-border: rgba(255, 255, 255, 0.08);
    --rr-subtle: rgba(255, 255, 255, 0.04);
    --rr-hover: #1b2440;
    --rr-text: #e5e7eb;
    --rr-text-secondary: #cbd5e1;
    --rr-text-weak: #cbd5e1;
    --rr-muted: #94a3b8;
    --rr-brand: #a78bfa;
    --rr-brand-strong: #7c3aed;
    --rr-accent: #38bdf8;
    --rr-success: #34d399;
    --rr-warn: #fbbf24;
    --rr-danger: #f87171;
    --rr-dot: rgba(226, 232, 240, 0.08);
  }
}

@layer components {
  .card {
    @apply rounded-xl shadow-md border;
    background: var(--rr-card);
    border-color: var(--rr-border);
  }
  /* Generic buttons used across builder */
  .btn {
    @apply inline-flex items-center justify-center rounded-lg px-3 py-2 text-sm font-medium transition;
    background: var(--rr-card);
    color: var(--rr-text);
    border: 1px solid var(--rr-border);
  }
  .btn:hover {
    @apply shadow-sm;
    background: var(--rr-subtle);
  }
  .btn[disabled] {
    @apply opacity-60 cursor-not-allowed;
  }
  .btn.primary {
    color: #fff;
    background: var(--rr-brand-strong);
    border-color: var(--rr-brand-strong);
  }
  .btn.primary:hover {
    filter: brightness(1.05);
  }
  .btn.ghost {
    background: transparent;
    border-color: transparent;
  }

  .mini {
    @apply inline-flex items-center justify-center rounded-md px-2 py-1 text-xs font-medium;
    background: var(--rr-card);
    color: var(--rr-text);
    border: 1px solid var(--rr-border);
  }
  .mini:hover {
    background: var(--rr-subtle);
  }
  .mini.danger {
    background: color-mix(in oklab, var(--rr-danger) 8%, transparent);
    border-color: color-mix(in oklab, var(--rr-danger) 24%, var(--rr-border));
    color: var(--rr-text);
  }

  .input {
    @apply w-full px-3 py-2 rounded-lg text-sm;
    background: var(--rr-card);
    color: var(--rr-text);
    border: 1px solid var(--rr-border);
    outline: none;
  }
  .input:focus {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--rr-brand) 26%, transparent);
    border-color: var(--rr-brand);
  }
  .select {
    @apply w-full px-3 py-2 rounded-lg text-sm;
    background: var(--rr-card);
    color: var(--rr-text);
    border: 1px solid var(--rr-border);
    outline: none;
  }
  .textarea {
    @apply w-full rounded-lg text-sm;
    padding: 10px 12px;
    background: var(--rr-card);
    color: var(--rr-text);
    border: 1px solid var(--rr-border);
    outline: none;
  }
  .label {
    @apply text-sm;
    color: var(--rr-muted);
  }
  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium;
  }
  .badge-purple {
    background: color-mix(in oklab, var(--rr-brand) 14%, transparent);
    color: var(--rr-brand);
  }

  /* Builder topbar */
  .rr-topbar {
    height: 56px;
    border-bottom: 1px solid var(--rr-border);
    background: var(--rr-topbar);
  }

  /* Dot grid background utility for canvas container */
  .rr-dot-grid {
    background-image: radial-gradient(var(--rr-dot) 1px, transparent 1px);
    background-size: 20px 20px;
  }
}
