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

:root {
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

html { color-scheme: dark; }
body { font-family: var(--font-sans); }

.animate-in {
    animation: slideUpFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* Tab panes */
.tab-pane.hidden { display: none; }

/* ────────────────────────────────────────────────────────────
   CODE EDITOR
   Layout comes from Tailwind (absolute inset-0 etc.) — we only
   override typography so pre and textarea are PIXEL-PERFECT.
   ──────────────────────────────────────────────────────────── */
#editor,
#highlight {
    /* Identical typography — any mismatch causes text to drift */
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    line-height: 21px !important;
    padding: 18px 20px !important;
    tab-size: 2;
    -moz-tab-size: 2;
    word-wrap: break-word;
    letter-spacing: normal;
    box-sizing: border-box;
}

/* Textarea: transparent text so the pre shows through */
#editor {
    color: transparent !important;
    caret-color: #60a5fa !important;
    background: transparent !important;
    z-index: 10;
    -webkit-text-fill-color: transparent !important;
}

#editor::selection,
#editor::-moz-selection {
    background: rgba(59, 130, 246, 0.28) !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Line numbers must match editor line-height exactly */
#lines {
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    line-height: 21px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    box-sizing: border-box;
}

/* Pre overlay sits behind textarea, pointer-events none */
#highlight {
    display: block !important;
    color: #94a3b8;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    z-index: 1;
}

/* Syntax tokens */
#highlight .keyword { color: #a78bfa; font-weight: 600; }
#highlight .string  { color: #34d399; }
#highlight .comment { color: #475569; font-style: italic; }
#highlight .value   { color: #60a5fa; }
#highlight .key     { color: #fb7185; font-weight: 500; }

/* Plugin card */
.plugin-card {
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    cursor: pointer;
}
.plugin-card:hover {
    border-color: #3b82f6 !important;
    background: #0f172a !important;
    transform: translateY(-1px);
}

/* Empty state */
.empty-state {
    animation: slideUpFade 0.4s ease forwards;
}