/*
 * DataCamp Ace Crimson Editor — Cloud palette accessibility overrides
 *
 * Load AFTER the existing Ace/Crimson theme CSS.
 *
 * Purpose:
 *   DataCamp is rendering the Ace Crimson theme namespace:
 *
 *       .ace-crimson-editor
 *
 *   so rules written for .ace-cloud_editor will never match it.
 *
 *   This file ports the accessible Cloud Editor color palette onto the
 *   selectors actually used by the Crimson theme. It does not replace,
 *   register, or fork an Ace theme.
 *
 * Development:
 *   - Carl Schaad w/ChatGPT 08/25/2026-09/03/2026.
 *   - Based on Cloud theme colors modifying ACE CSS
 *
 * Notes:
 *   - No !important declarations are used. This file should load last.
 *   - Crimson-specific token selectors are explicitly included because their
 *     higher specificity would otherwise preserve the old Crimson colors.
 *   - Selection and active-line states are adjusted so the Cloud foreground
 *     palette continues to meet WCAG AA when those states are present.
 */


/* ==========================================================================
   EDITOR CHROME / BASE TEXT
   ========================================================================== */

.datacamp-exercise .ace-crimson-editor {
    background-color: #ffffff;
    color: #3a3a42;
}

/*
 * Crimson's original invisible-character color is very faint (#bfbfbf).
 * Use the Cloud neutral gray instead.
 */
.datacamp-exercise .ace-crimson-editor .ace_invisible {
    color: #697077;
}

.datacamp-exercise .ace-crimson-editor .ace_identifier {
    color: #3a3a42;
}


/* ==========================================================================
   SYNTAX — PURPLE
   Keywords, storage, selectors
   ========================================================================== */

.datacamp-exercise .ace-crimson-editor .ace_keyword,
.datacamp-exercise .ace-crimson-editor .ace_keyword.ace_operator,
.datacamp-exercise .ace-crimson-editor .ace_storage,
.datacamp-exercise .ace-crimson-editor .ace_meta.ace_selector {
    color: #9749d1;
}


/* ==========================================================================
   SYNTAX — BROWN
   Constants, classes/types, attributes, XML processing instructions
   ========================================================================== */

.datacamp-exercise .ace-crimson-editor .ace_constant,
.datacamp-exercise .ace-crimson-editor .ace_constant.ace_buildin,
.datacamp-exercise .ace-crimson-editor .ace_constant.ace_builtin,
.datacamp-exercise .ace-crimson-editor .ace_constant.ace_language,
.datacamp-exercise .ace-crimson-editor .ace_constant.ace_library,
.datacamp-exercise .ace-crimson-editor .ace_constant.ace_numeric,
.datacamp-exercise .ace-crimson-editor .ace_support.ace_constant,
.datacamp-exercise .ace-crimson-editor .ace_support.ace_type,
.datacamp-exercise .ace-crimson-editor .ace_support.ace_class,
.datacamp-exercise .ace-crimson-editor .ace_entity.ace_other.ace_attribute-name,
.datacamp-exercise .ace-crimson-editor .ace_xml-pe {
    color: #A16101;
}


/* ==========================================================================
   SYNTAX — MAGENTA
   Character escapes
   ========================================================================== */

.datacamp-exercise .ace-crimson-editor .ace_constant.ace_character.ace_escape {
    color: #BD1880;
}


/* ==========================================================================
   SYNTAX — DARK RED
   Functions and headings
   ========================================================================== */

.datacamp-exercise .ace-crimson-editor .ace_support.ace_function,
.datacamp-exercise .ace-crimson-editor .ace_entity.ace_name.ace_function,
.datacamp-exercise .ace-crimson-editor .ace_heading {
    color: #A81700;
}


/* ==========================================================================
   SYNTAX — TEAL
   Strings / regular expressions
   ========================================================================== */

.datacamp-exercise .ace-crimson-editor .ace_string,
.datacamp-exercise .ace-crimson-editor .ace_string.ace_regex,
.datacamp-exercise .ace-crimson-editor .ace_string.ace_regexp {
    color: #207A7F;
}


/* ==========================================================================
   SYNTAX — GRAY
   Comments / ghost text
   ========================================================================== */

/*
 * Crimson has more-specific doc-comment selectors, so they are included here
 * explicitly to prevent the original blue/gray doc-comment colors from winning.
 */
.datacamp-exercise .ace-crimson-editor .ace_comment,
.datacamp-exercise .ace-crimson-editor .ace_comment.ace_doc,
.datacamp-exercise .ace-crimson-editor .ace_comment.ace_doc.ace_tag,
.datacamp-exercise .ace-crimson-editor .ace_ghost_text {
    color: #697077;
    opacity: 1;
}


/* ==========================================================================
   SYNTAX — BLUE
   Variables, tags, doctypes
   ========================================================================== */

.datacamp-exercise .ace-crimson-editor .ace_variable,
.datacamp-exercise .ace-crimson-editor .ace_meta.ace_tag,
.datacamp-exercise .ace-crimson-editor .ace_entity.ace_name.ace_tag,
.datacamp-exercise .ace-crimson-editor .ace_doctype {
    color: #0E45B4;
}


/* ==========================================================================
   INVALID / DEPRECATED CONTENT
   ========================================================================== */

/*
 * Generic Crimson invalid tokens may occur without the Cloud-specific
 * illegal/deprecated subclasses. Keep that state high-contrast.
 */
.datacamp-exercise .ace-crimson-editor .ace_invalid {
    color: #A81700;
}

/*
 * When Ace supplies the more-specific states, reproduce Cloud's treatments.
 */
.datacamp-exercise .ace-crimson-editor .ace_invalid.ace_illegal {
    color: #ffffff;
    background-color: #0E45B4;
}

.datacamp-exercise .ace-crimson-editor .ace_invalid.ace_deprecated {
    color: #ffffff;
    background-color: #A16101;
}


/* ==========================================================================
   FOLD MARKER
   ========================================================================== */


/* ==========================================================================
   SELECTION
   ========================================================================== */

/*
 * Crimson original: rgb(181, 213, 255) / #b5d5ff
 * Cloud original:   #bfceff
 *
 * Both are too dark behind several Cloud syntax colors.
 * #f5f7ff keeps every foreground color in this port at >= 4.5:1.
 */
.datacamp-exercise .ace-crimson-editor .ace_marker-layer .ace_selection {
    background: #f5f7ff;
    box-shadow: inset 0 0 0 1px #0E45B4;
}

/*
 * This shadow/border-radius treatment existed in the source Cloud theme for
 * the START of a multiselect. It is not the extra inset shadow previously
 * proposed for ordinary selections.
 */
.datacamp-exercise .ace-crimson-editor.ace_multiselect .ace_selection.ace_start {
    box-shadow:
        inset 0 0 0 1px #0E45B4,
        0 0 3px 0 #ffffff;
    border-radius: 2px;
}


/* ==========================================================================
   ACTIVE LINE
   ========================================================================== */

/*
 * Crimson's original active-line fill (#e8f2fe) lowers some of the Cloud
 * syntax colors below 4.5:1.
 *
 * Follow Cloud's border-based treatment instead of putting a colored fill
 * behind the code. #7b7b92 provides more margin than Cloud's original
 * #9191ac border.
 */
.datacamp-exercise .ace-crimson-editor .ace_marker-layer .ace_active-line {
    background: transparent;
    box-sizing: border-box;
    border-top: 1px solid #7b7b92;
    border-bottom: 1px solid #7b7b92;
}

/*
 * Keep the active gutter line visible without using Crimson's darker #dcdcdc.
 */



/* ==========================================================================
   DEBUGGER STEP / STACK MARKERS
   ========================================================================== */

/*
 * Crimson's original yellow step fill preserves text contrast but has very
 * little contrast against the surrounding white editor. Its green stack fill
 * also reduces several Cloud syntax colors below 4.5:1.
 *
 * Keep the AA-safe light background behind code and use a strong left boundary
 * to communicate the state without sacrificing syntax-text contrast.
 */
.datacamp-exercise .ace-crimson-editor .ace_marker-layer .ace_step {
    background: #f5f7ff;
    box-sizing: border-box;
    border-left: 3px solid #0E45B4;
}

.datacamp-exercise .ace-crimson-editor .ace_marker-layer .ace_stack {
    background: #f5f7ff;
    box-sizing: border-box;
    border-left: 3px solid #906806;
}


/* ==========================================================================
   BRACKET / SELECTED WORD
   ========================================================================== */

.datacamp-exercise .ace-crimson-editor .ace_marker-layer .ace_bracket {
    border-color: #697077;
}

.datacamp-exercise .ace-crimson-editor .ace_marker-layer .ace_selected-word {
    background: transparent;
    border: 1px solid #0E45B4;
}


/* ==========================================================================
   TOOLTIP / DIAGNOSTIC COLORS
   These selectors are harmless if the installed Ace build does not emit them.
   ========================================================================== */

.datacamp-exercise .ace-crimson-editor .ace_highlight-marker {
    background: none;
    border: 1px solid #0E45B4;
}


/* ==========================================================================
   SNIPPET MARKER
   ========================================================================== */

/*
 * Cloud's original #CED6E0 snippet fill also lowers several syntax colors
 * below AA. Use the AA-safe state fill and a strong boundary.
 */
.datacamp-exercise .ace-crimson-editor .ace_snippet-marker {
    background-color: #f5f7ff;
    border: 1px solid #0E45B4;
    box-sizing: border-box;
}


.datacamp-exercise .ace-crimson-editor .ace_indent-guide {
    background: none;
    box-shadow: inset -1px 0 0 #697077;
}

.datacamp-exercise .ace-crimson-editor .ace_indent-guide-active {
    background: none;
    box-shadow: inset -2px 0 0 #0E45B4;
}


/* ==========================================================================
   AUTOCOMPLETE
   ========================================================================== */