/* Fe syntax highlighting — CSS custom properties define all colors.
   Default: Catppuccin Mocha (dark). Light override via prefers-color-scheme
   or data-theme="light". Host pages can override any --fe-* variable. */

/* ============================================================================
   Color variables
   ============================================================================ */

/* Default: Catppuccin Mocha (dark) */
:root {
    --fe-hl-keyword: #cba6f7;
    --fe-hl-variable-builtin: #94e2d5;
    --fe-hl-type: #f9e2af;
    --fe-hl-type-interface: #cba6f7;
    --fe-hl-type-variant: #f9e2af;
    --fe-hl-function: #89b4fa;
    --fe-hl-string: #a6e3a1;
    --fe-hl-string-escape: #94e2d5;
    --fe-hl-number: #94e2d5;
    --fe-hl-comment: #6c7086;
    --fe-hl-operator: #94e2d5;
    --fe-hl-variable: #a6e3a1;
    --fe-hl-attribute: #cba6f7;
    --fe-hl-constant: #94e2d5;
    --fe-hl-punctuation: #6c7086;

    --fe-code-bg: #1e1e2e;
    --fe-code-border: #313244;
    --fe-code-text: #cdd6f4;
    --fe-code-line-number: #6c7086;
    --fe-code-font: "JetBrains Mono", "Fira Code", monospace;
    --fe-code-size: 0.8rem;
    --fe-code-line-height: 1.6;
    --fe-code-radius: 6px;
}

/* Light override: Catppuccin Latte — via OS preference */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --fe-hl-keyword: #7c3aed;
        --fe-hl-variable-builtin: #0891b2;
        --fe-hl-type: #b08800;
        --fe-hl-type-interface: #7c3aed;
        --fe-hl-type-variant: #b08800;
        --fe-hl-function: #2563eb;
        --fe-hl-string: #16a34a;
        --fe-hl-string-escape: #0d9488;
        --fe-hl-number: #0891b2;
        --fe-hl-comment: #9ca0b0;
        --fe-hl-operator: #0891b2;
        --fe-hl-variable: #0d9488;
        --fe-hl-attribute: #7c3aed;
        --fe-hl-constant: #0891b2;
        --fe-hl-punctuation: #6b7280;

        --fe-code-bg: #eff1f5;
        --fe-code-border: #ccd0da;
        --fe-code-text: #4c4f69;
        --fe-code-line-number: #9ca0b0;
    }
}

/* Light override: explicit toggle */
:root[data-theme="light"] {
    --fe-hl-keyword: #7c3aed;
    --fe-hl-variable-builtin: #0891b2;
    --fe-hl-type: #b08800;
    --fe-hl-type-interface: #7c3aed;
    --fe-hl-type-variant: #b08800;
    --fe-hl-function: #2563eb;
    --fe-hl-string: #16a34a;
    --fe-hl-string-escape: #0d9488;
    --fe-hl-number: #0891b2;
    --fe-hl-comment: #9ca0b0;
    --fe-hl-operator: #0891b2;
    --fe-hl-variable: #0d9488;
    --fe-hl-attribute: #7c3aed;
    --fe-hl-constant: #0891b2;
    --fe-hl-punctuation: #6b7280;

    --fe-code-bg: #eff1f5;
    --fe-code-border: #ccd0da;
    --fe-code-text: #4c4f69;
    --fe-code-line-number: #9ca0b0;
}

/* ============================================================================
   Syntax highlight rules — read variables, no fallbacks
   ============================================================================ */

.hl-keyword { color: var(--fe-hl-keyword); }
.hl-variable-builtin { color: var(--fe-hl-variable-builtin); font-style: italic; }
.hl-type, .hl-type-builtin { color: var(--fe-hl-type); }
.hl-type-interface { color: var(--fe-hl-type-interface); }
.hl-type-enum-variant { color: var(--fe-hl-type-variant); }
.hl-function, .hl-function-definition, .hl-function-method { color: var(--fe-hl-function); }
.hl-string { color: var(--fe-hl-string); }
.hl-string-escape { color: var(--fe-hl-string-escape); }
.hl-number { color: var(--fe-hl-number); }
.hl-comment, .hl-comment-doc { color: var(--fe-hl-comment); font-style: italic; }
.hl-operator { color: var(--fe-hl-operator); }
.hl-property, .hl-variable-parameter { color: var(--fe-hl-variable); }
.hl-variable { color: var(--fe-hl-variable); }
.hl-attribute { color: var(--fe-hl-attribute); }
.hl-constant { color: var(--fe-hl-constant); font-weight: bold; }
.hl-punctuation-bracket, .hl-punctuation-delimiter, .hl-punctuation-special { color: var(--fe-hl-punctuation); }

/* SCIP symbol hover highlight transitions */
[class*="sym-"] {
    transition: background 0.2s ease-out, text-decoration 0.2s ease-out,
                text-decoration-color 0.2s ease-out;
}

/* ============================================================================
   <fe-code-block> component layout
   ============================================================================ */

fe-code-block {
    display: block;
    margin: 1rem 0;
}

.fe-code-block-wrapper {
    display: flex;
    background: var(--fe-code-bg);
    border: 1px solid var(--fe-code-border);
    border-radius: var(--fe-code-radius);
    overflow-x: auto;
    max-width: 100%;
}

.member-header fe-code-block,
.code-header fe-code-block,
.implementor-sig fe-code-block {
    margin: 0;
}

.member-header,
.code-header,
.implementor-sig {
    --fe-code-border: transparent;
}

.fe-line-numbers {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.5rem;
    border-right: 1px solid var(--fe-code-border);
    text-align: right;
    user-select: none;
    color: var(--fe-code-line-number);
    font-family: var(--fe-code-font);
    font-size: var(--fe-code-size);
    line-height: var(--fe-code-line-height);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.fe-line-numbers span {
    line-height: var(--fe-code-line-height);
}

.fe-code-pre {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0.75rem 1rem;
    background: transparent;
    overflow-x: auto;
    font-family: var(--fe-code-font);
    font-size: var(--fe-code-size);
    line-height: var(--fe-code-line-height);
    /* Prevent iOS Safari TextAutoSizing from inflating font-size in code blocks.
       Without this, the algorithm selectively enlarges text in blocks whose
       intrinsic width exceeds the viewport (timing-dependent on first load),
       causing inconsistent sizes across code blocks with identical styles.
       Using 100% (not none) preserves user zoom and accessibility settings. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.fe-code-pre code {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--fe-code-text);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}