/* Custom Styles for detections.dev */




/*verified*/
.install-code {
    background-color: var(--code-bg);
    color: var(--accent-green);
    padding: 1rem 1.5rem;
    border-radius: 6px;
    font-family: 'Fira Code', monospace;
    font-size: 1.1rem;
    display: inline-block;
    margin-top: 1rem;
    border: 1px solid #334155;
}

.box.bad {
    border: 2px solid;
    border-color: #EF4444;
    background-color: #FEF2F2;
}

.box.bad h3 {
    color: #DC2626;
}

.box.good {
    border: 2px solid;
    border-color: var(--accent-green);
    background-color: #F0FDF4;
}

.box.good h3 {
    color: var(--accent-green);
}
/*verified*/

/* Color Palette */
:root {
    --primary-blue: #1E40AF;
    --secondary-cyan: #06B6D4;
    --accent-green: #10B981;
    --bg-light: #F9FAFB;
    --text-dark: #1F2937;
    --border-gray: #E5E7EB;
    --code-bg: #1E293B;
}

/* Global Styles */

/* Code Blocks */
pre {
    background-color: var(--code-bg) !important;
    border-radius: 0.5rem;
    overflow-x: auto;
    border: 1px solid #334155;
}

code {
    background-color: var(--code-bg);
    color: #E2E8F0;
    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
}

pre code {
    background: none;
}

/* Inline code */
:not(pre) > code {
    background-color: #F3F4F6;
    color: var(--primary-blue);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

/* Syntax highlighting colors */
.keyword { color: #C792EA; }
.function { color: #82AAFF; }
.string { color: #C3E88D; }
.comment { color: #697098; font-style: italic; }
.operator { color: #89DDFF; }
.punctuation { color: #E2E8F0; }


/* Footer */
.footer {
    background-color: var(--text-dark);
    color: #E5E7EB;
    padding: 3rem 1.5rem;
}

.footer a {
    color: var(--secondary-cyan);
    transition: color 0.2s;
}

.footer a:hover {
    color: var(--accent-green);
}

.footer .tagline {
    color: #9CA3AF;
    font-style: italic;
    margin-top: 0.5rem;
}

/* Responsive Typography */
@media screen and (max-width: 768px) {
    pre {
        padding: 1rem;
        font-size: 0.85rem;
    }
}