/* Snip — Terminal Ops Theme */

/* ======================== */
/* Theme custom properties  */
/* ======================== */

/* Light theme (default root) */
:root {
    --color-bg: #f5f5f5;
    --color-surface: #ffffff;
    --color-border: #e2e2e2;
    --color-text: #1a1a2e;
    --color-text-secondary: #4b5563;
    --color-muted: #6b7280;
    --color-terminal-bg: #f0f0f4;
    --color-terminal-header: rgba(0, 0, 0, 0.05);
    --color-terminal-border: #d4d4d8;
    --color-code-text: #1a1a2e;
    --color-input-bg: #f9fafb;
    --color-select-option-bg: #ffffff;
    --color-select-option-text: #1a1a2e;
    --color-scrollbar-track: #f5f5f5;
    --color-scrollbar-thumb: #d4d4d8;
    --color-scrollbar-thumb-hover: #a1a1aa;
    --color-selection-bg: rgba(34, 211, 238, 0.15);
    --color-selection-text: #1a1a2e;
    --color-overlay-bg: rgba(0, 0, 0, 0.3);
    --color-card-code-bg: rgba(0, 0, 0, 0.03);
}

/* Dark theme */
html.dark {
    --color-bg: #0a0a0f;
    --color-surface: #12121a;
    --color-border: #1e1e2e;
    --color-text: #e5e7eb;
    --color-text-secondary: #d1d5db;
    --color-muted: #6b7280;
    --color-terminal-bg: #08080d;
    --color-terminal-header: rgba(0, 0, 0, 0.4);
    --color-terminal-border: #1e1e2e;
    --color-code-text: #e5e7eb;
    --color-input-bg: #0a0a0f;
    --color-select-option-bg: #12121a;
    --color-select-option-text: #e5e7eb;
    --color-scrollbar-track: #0a0a0f;
    --color-scrollbar-thumb: #1e1e2e;
    --color-scrollbar-thumb-hover: #2e2e3e;
    --color-selection-bg: rgba(34, 211, 238, 0.2);
    --color-selection-text: #e2e8f0;
    --color-overlay-bg: rgba(0, 0, 0, 0.6);
    --color-card-code-bg: rgba(0, 0, 0, 0.2);
}

/* ======================== */
/* Base styles              */
/* ======================== */

body {
    background: var(--color-bg);
    color: var(--color-text);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-thumb-hover);
}

/* Terminal blocks */
.terminal-block {
    background: var(--color-terminal-bg);
    border-color: var(--color-terminal-border);
}

.terminal-header {
    background: var(--color-terminal-header);
}

/* Line clamp */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Code blocks - override Prism theme */
pre[class*="language-"],
code[class*="language-"] {
    background: transparent !important;
    text-shadow: none !important;
    font-family: 'JetBrains Mono', monospace !important;
    color: var(--color-code-text) !important;
}

pre[class*="language-"] {
    padding: 0 !important;
    margin: 0 !important;
}

/* Light mode Prism token overrides */
html:not(.dark) .token.comment,
html:not(.dark) .token.prolog,
html:not(.dark) .token.doctype,
html:not(.dark) .token.cdata {
    color: #6b7280 !important;
}
html:not(.dark) .token.punctuation {
    color: #374151 !important;
}
html:not(.dark) .token.property,
html:not(.dark) .token.tag,
html:not(.dark) .token.boolean,
html:not(.dark) .token.number,
html:not(.dark) .token.constant,
html:not(.dark) .token.symbol {
    color: #0369a1 !important;
}
html:not(.dark) .token.selector,
html:not(.dark) .token.attr-name,
html:not(.dark) .token.string,
html:not(.dark) .token.char,
html:not(.dark) .token.builtin {
    color: #047857 !important;
}
html:not(.dark) .token.operator,
html:not(.dark) .token.entity,
html:not(.dark) .token.url,
html:not(.dark) .token.variable {
    color: #92400e !important;
}
html:not(.dark) .token.atrule,
html:not(.dark) .token.attr-value,
html:not(.dark) .token.function {
    color: #7c3aed !important;
}
html:not(.dark) .token.keyword {
    color: #be185d !important;
}
html:not(.dark) .token.regex,
html:not(.dark) .token.important {
    color: #d97706 !important;
}

/* Copy button feedback */
.copy-btn.copied {
    color: #22d3ee;
}

.copy-btn.copied svg {
    transform: scale(1.1);
}

/* Smooth transitions */
a, button {
    transition: all 0.15s ease;
}

/* Selection */
::selection {
    background: var(--color-selection-bg);
    color: var(--color-selection-text);
}

/* Form elements */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

select option {
    background: var(--color-select-option-bg);
    color: var(--color-select-option-text);
}

/* Focus ring */
input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.2);
}

/* Kbd style */
kbd {
    font-family: 'JetBrains Mono', monospace;
}

/* HTMX loading indicator */
.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms;
}

/* ======================== */
/* Light mode overrides     */
/* ======================== */

/* Sidebar, palette, and cards in light mode */
html:not(.dark) .bg-surface {
    background: var(--color-surface) !important;
}
html:not(.dark) .bg-bg {
    background: var(--color-bg) !important;
}
html:not(.dark) .border-border {
    border-color: var(--color-border) !important;
}
html:not(.dark) .text-gray-300,
html:not(.dark) .text-gray-200 {
    color: var(--color-text) !important;
}
html:not(.dark) .text-gray-100 {
    color: #111827 !important;
}
html:not(.dark) .text-gray-400 {
    color: #4b5563 !important;
}
html:not(.dark) .text-muted {
    color: #6b7280 !important;
}
html:not(.dark) .bg-black\/60 {
    background: var(--color-overlay-bg) !important;
}
html:not(.dark) .bg-black\/40 {
    background: var(--color-terminal-header) !important;
}
html:not(.dark) .bg-black\/20 {
    background: var(--color-card-code-bg) !important;
}
html:not(.dark) .bg-black\/10 {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* Light mode form inputs */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
    background: var(--color-input-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #9ca3af !important;
}