/* ========================================================================
   COLOR VARIABLES
   ======================================================================== */

:root {
    --color-text-primary: #e6edf3;     /* Main text color */
    --color-text-muted: #8b949e;       /* Muted text (headings, prompts) */
    --color-accent-blue: #79c0ff;      /* Blue accent (bold text, links) */
    --color-bg-dark: #0D1117;          /* Dark background */
    --color-border: #e6edf3;           /* Borders */
    --color-error: #ff6b6b;            /* Error text/borders */
}

/* ========================================================================
   TEXT STYLING
   ======================================================================== */

.reveal b {
    color: var(--color-accent-blue);
}

/* Inline code */
.reveal code {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--color-text-primary);
    /* Disable ligatures so symbols like != appear as typed */
    font-variant-ligatures: none;
}

/* Code inside code blocks should be normal size */
.code-wrapper code {
    font-size: 1em;
}

/* ========================================================================
   LAYOUT UTILITIES
   ======================================================================== */

.reveal {
    --r-main-font-size: 36px;
}

.two-column {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.three-column {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.column {
    flex: 1;
}

.spaced-list > li + li {
    margin-top: 0.8em;
}

/* ========================================================================
   TITLE SLIDE
   ======================================================================== */

   .title-slide h1 {
    font-size: 3.5em;
}

/* ========================================================================
   CODE BLOCK STYLING
   ======================================================================== */

.code-wrapper {
    background: var(--color-bg-dark);
    border-radius: 8px;
    border: 1.5px solid var(--color-border);
    padding: 0;
    margin: 20px 0;
    overflow: hidden;
}

.code-wrapper .hljs {
    --code-margin: 15px;
    margin: var(--code-margin);
    padding: 0;
}

pre.code-wrapper .hljs {
    --code-margin: 15px;
    margin: var(--code-margin);
    padding: 0;
}

pre.code-wrapper .hljs table {
    margin: var(--code-margin);
    padding: 0;
}

pre.code-wrapper .hljs td {
    margin: 0;
    padding: 0;
}

pre.code-wrapper .hljs td:first-child {
    padding-right: 1em;
}

pre.code-wrapper .hljs td:last-child {
    padding-left: 0.5em;
}

.highlight-line {
    background: rgba(255, 255, 0, 0.2);
}

/* ========================================================================
   OTHER CODE STYLING
   ======================================================================== */

   .terminal-input {
    --code-margin: 15px;
    margin: var(--code-margin);
    padding: 0;
    position: relative;
}

.terminal-input::before {
    content: "$";
    color: var(--color-text-muted);
    position: absolute;
    left: calc(var(--code-margin) + 8px);
    top: calc(var(--code-margin) + 5px);
    font-weight: bold;
    padding-right: 1em;
    text-align: right;
    vertical-align: top;
    width: 1em;
}

.terminal-input.code-wrapper code,
.terminal-input.code-wrapper .hljs,
.terminal-input.code-wrapper .hljs * {
    color: var(--color-text-primary) !important;
}

.terminal-input.code-wrapper code {
    padding-left: 2.75em;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: 'Cascadia Code', Consolas, 'Courier New', monospace;
    font-weight: 400;
    color: var(--color-text-primary) !important;
}

.terminal-input.code-wrapper {
    margin-left: auto;
    margin-right: auto;
} 

.error-output {
    border: 1.5px solid var(--color-error) !important;
}

.error-output code,
.error-output .hljs {
    color: var(--color-error) !important;
    background: transparent !important;
}

/* ========================================================================
   CONTENT BOXES
   ======================================================================== */

.concept-box {
    background: rgba(100, 100, 255, 0.1);
    border-left: 4px solid #6666ff;
    padding: 15px;
    margin: 15px 0;
}

.warning-box {
    background: rgba(255, 100, 0, 0.1);
    border-left: 4px solid #ff6600;
    padding: 15px;
    margin: 15px 0;
}

.math-block {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    margin: 15px 0;
}
/* ========================================================================
   SYNTAX HIGHLIGHTING THEME (GitHub Dark)
   ======================================================================== */

.hljs {
    background: #0D1117 !important;
    color: #e6edf3 !important;
}

.hljs-keyword { color: #ff7b72 !important; }      /* def, if, for, etc. - line 332 */
.hljs-string { color: #a5d6ff !important; }       /* "strings" - line 360 */
.hljs-number { color: #79c0ff !important; }       /* 123, 4.5 - line 287 */
.hljs-comment { color: #8b949e !important; }      /* # comments - line 265 */
.hljs-function { color: #d2a8ff !important; }     /* function names - line 317 */
.hljs-built_in { color: #79c0ff !important; }     /* print, len, etc. - line 366 */
.hljs-variable { color: #ffa657 !important; }     /* variable names - line 378 */
.hljs-title { color: #d2a8ff !important; }        /* function definitions - line 317 */
.hljs-params { color: #e6edf3 !important; }       /* function parameters - line 311 */
.hljs-type { color: #79c0ff !important; }         /* class names, types - line 366 */
.hljs-class { color: #ffa657 !important; }        /* class definitions - line 297 */
.hljs-attr { color: #79c0ff !important; }         /* attributes - line 372 */
.hljs-attribute { color: #79c0ff !important; }    /* HTML/XML attributes - line 372 */
.hljs-literal { color: #79c0ff !important; }      /* True, False, None - line 287 */
.hljs-symbol { color: #79c0ff !important; }       /* symbols - line 287 */
.hljs-operator { color: #ff7b72 !important; }     /* +, -, =, etc. - line 332 */
.hljs-punctuation { color: #e6edf3 !important; }  /* (), [], {}, etc. - line 311 */
.hljs-bracket { color: #e6edf3 !important; }      /* brackets - line 311 */
.hljs-tag { color: #7ee787 !important; }          /* HTML tags - line 326 */
.hljs-name { color: #7ee787 !important; }         /* tag names - line 326 */
.hljs-selector-tag { color: #7ee787 !important; } /* CSS selectors - line 326 */
.hljs-selector-id { color: #79c0ff !important; }  /* CSS IDs - line 372 */
.hljs-selector-class { color: #79c0ff !important; } /* CSS classes - line 372 */
.hljs-property { color: #79c0ff !important; }     /* CSS properties - line 372 */
.hljs-value { color: #a5d6ff !important; }        /* CSS values - line 360 */
.hljs-meta { color: #8b949e !important; }         /* decorators, pragma - line 265 */
.hljs-doctag { color: #8b949e !important; }       /* docstring tags - line 265 */
.hljs-regexp { color: #a5d6ff !important; }       /* regular expressions - line 442 */
.hljs-section { color: #d2a8ff !important; }      /* sections, headings - line 317 */
.hljs-template-variable { color: #ffa657 !important; } /* template vars - line 378 */
.hljs-template-tag { color: #ff7b72 !important; } /* template tags - line 332 */
.hljs-addition { color: #7ee787 !important; }     /* diff additions - line 572 */
.hljs-deletion { color: #ffa198 !important; }     /* diff deletions - line 553 */
.hljs-link { color: #a5d6ff !important; }         /* links - line 646 */