/* css/syntax-highlight.css */

/* === Dhaad Language Syntax Highlighting === */

/* Base code styling */
pre, code {
    font-family: 'Fira Code', 'JetBrains Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    tab-size: 4;
    -moz-tab-size: 4;
}

pre {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    overflow-x: auto;
    white-space: pre;
}

code {
    background: transparent;
    padding: 0;
}

/* Code block container */
.code-content pre {
    padding: 0;
}

/* Dhaad-specific syntax tokens */
.language-dhaad .keyword {
    color: var(--primary);
    font-weight: 600;
}

.language-dhaad .block-type {
    color: var(--secondary);
    font-weight: 700;
}

.language-dhaad .function {
    color: var(--accent);
    font-weight: 600;
}

.language-dhaad .type {
    color: #10b981; /* success green */
    font-weight: 500;
}

.language-dhaad .string {
    color: #f59e0b; /* warning orange */
}

.language-dhaad .number {
    color: #8b5cf6; /* purple */
}

.language-dhaad .comment {
    color: var(--text-tertiary);
    font-style: italic;
}

.language-dhaad .operator {
    color: var(--text-secondary);
    font-weight: 500;
}

.language-dhaad .outcome-arrow {
    color: var(--error);
    font-weight: 700;
}

.language-dhaad .outcome-handler {
    color: #06b6d4; /* cyan */
    font-weight: 600;
}

.language-dhaad .mode {
    color: #7c3aed; /* purple */
    font-weight: 500;
}

.language-dhaad .constraint {
    color: #ef4444; /* red */
    font-weight: 500;
}

.language-dhaad .optional {
    color: #f59e0b; /* orange */
}

.language-dhaad .required {
    color: #ef4444; /* red */
    font-weight: 700;
}

.language-dhaad .stream {
    color: #06b6d4; /* cyan */
}

/* Line numbers */
pre[class*="language-"].line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber;
}

pre[class*="language-"].line-numbers > code {
    position: relative;
    white-space: inherit;
}

.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid var(--border);
    user-select: none;
}

.line-numbers-rows > span {
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: var(--text-tertiary);
    display: block;
    padding-right: 0.8em;
    text-align: right;
}

/* Inline code */
:not(pre) > code {
    background: var(--surface);
    color: var(--text-primary);
    padding: 0.2em 0.4em;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    border: 1px solid var(--border);
}

/* Code highlighting animations */
.code-highlight {
    position: relative;
}

.code-highlight::before {
    content: '';
    position: absolute;
    left: -0.5em;
    right: -0.5em;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(37, 99, 235, 0.1) 50%, 
        transparent 100%);
    border-left: 2px solid var(--primary);
    animation: highlight-pulse 2s ease-in-out;
}

@keyframes highlight-pulse {
    0%, 100% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Copy to clipboard button */
.code-copy {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: all var(--transition-fast);
}

.code-window:hover .code-copy {
    opacity: 1;
}

.code-copy:hover {
    background: var(--surface);
    color: var(--text-primary);
}

.code-copy.copied {
    background: var(--success);
    color: var(--text-inverse);
    border-color: var(--success);
}

/* Code folding */
.code-fold {
    position: relative;
}

.fold-toggle {
    position: absolute;
    left: -1.5em;
    top: 0.5em;
    width: 1em;
    height: 1em;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    color: var(--text-tertiary);
}

.fold-toggle:hover {
    background: var(--surface-elevated);
    color: var(--text-primary);
}

.fold-content {
    display: none;
}

.fold-content.expanded {
    display: block;
}

/* Responsive code blocks */
@media (max-width: 768px) {
    pre, code {
        font-size: 0.75rem;
    }
    
    .line-numbers .line-numbers-rows {
        left: -3.2em;
        width: 2.5em;
    }
    
    pre[class*="language-"].line-numbers {
        padding-left: 3.2em;
    }
}

/* Dark theme adjustments */
[data-theme="dark"] .language-dhaad .keyword {
    color: #60a5fa; /* lighter blue */
}

[data-theme="dark"] .language-dhaad .comment {
    color: #64748b; /* lighter gray */
}

/* Focus styles for accessibility */
.code-content:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Print styles for code */
@media print {
    pre, code {
        background: white !important;
        color: black !important;
        border: 1px solid #000 !important;
    }
    
    .language-dhaad .comment {
        color: #666 !important;
    }
    
    .code-copy {
        display: none !important;
    }
}