/**
 * CODE DISPLAY TOKENS
 *
 * A unified theming system for all code display components.
 * Works with both code-editor (Prism.js) and code-study (CodeMirror).
 *
 * HIERARCHY:
 * 1. BASE DEFAULTS - background, fonts, sizes, all syntax = white
 * 2. LANGUAGE THEMES - each language gets its own color palette
 * 3. THEME VARIANTS - modifiers like "monochrome" or "high-contrast"
 *
 * To add a new language: Copy an existing language block and adjust colors.
 * To add a new theme variant: Add a [data-theme="name"] block at the bottom.
 */


/* =============================================================================
   LAYER 1: BASE DEFAULTS
   These apply to ALL code displays. Syntax tokens default to white.
   ============================================================================= */

:root {
	/* Background & Text */
	--code-background: black;
	--code-background-light: white;
	--code-text-color: rgba(255, 255, 255, 0.7);
	--code-comment-color: rgba(255, 255, 255, 0.4);

	/* Typography */
	--code-font-family: 'Monaspace Neon', 'Courier New', Courier, monospace;
	--code-font-family-comment: 'Monaspace Radon', 'Monaspace Neon', monospace;
	--code-font-weight: 280;

	--code-font-size: 1.1rem;
	--code-font-size-large: 1.4rem;
	--code-font-size-small: 0.875rem;
	--code-line-height: 1.45;
	--code-tab-size: 3;

	/* Spacing & Shape */
	--code-space: 1.5rem;
	--code-padding: var(--code-space);
	--code-header-padding: 0.7rem var(--code-space) 0.5rem;
	--code-border-radius: 0px;
	--code-header-background: rgba(255, 255, 255, 0.05);
	--code-header-text-color: rgba(255, 255, 255, 0.7);
	--code-header-font-size: 0.8rem;

	/* Language Indicator Bar (disabled - backgrounds already indicate language) */
	--code-language-bar-size: 0;
	--code-language-bar-color: transparent;

	/* Pane Dividers (code-study multi-pane layouts) */
	--code-divider-size: 1px;
	--code-divider-color: rgba(255, 255, 255, 0.12);
	--code-zone-gap-color: rgba(0, 0, 0, 0.8);

	/* Pane Background Tint (language-colored backgrounds) */
	--code-pane-tint: 10%;

	/* Selection (shared by snippet and study) */
	--code-selection-background: transparent;
	--code-selection-color: currentColor;

	/* Syntax Highlighting - ALL DEFAULT TO WHITE */
	--code-tag-color: white;
	--code-attribute-color: white;
	--code-string-color: white;
	--code-keyword-color: white;
	--code-function-color: white;
	--code-property-color: white;
	--code-number-color: white;
	--code-operator-color: white;
	--code-punctuation-color: rgba(255, 255, 255, 0.6);
	--code-selector-color: white;
	--code-variable-color: white;
	--code-delimiter-color: white;
	--code-unit-color: white;
	--code-class-color: white;
	--code-special-color: white;

	/* Pedagogical Highlighting (mark tags) */
	--code-mark-one: white;
	--code-mark-two: rgba(255, 255, 255, 0.8);
	--code-mark-three: rgba(255, 255, 255, 0.6);

	/* Pacman Cursor */
	--code-pacman-color: #fc0;
}


/* =============================================================================
   LAYER 2: LANGUAGE THEMES
   Each language overrides the syntax colors from the base.
   Uses [data-language] so it works for BOTH code-editor and code-study.
   ============================================================================= */

/* BASH / TERMINAL - Green tones */
[data-language="bash"] {
	--code-language-bar-color: white;
	--code-pacman-color: #fc0;
	--code-mark-one: var(--color-green-300);
	--code-mark-two: var(--color-lime-300);
	--code-mark-three: var(--color-emerald-300);
	/* Terminal keeps everything white - it's not really "syntax" */
}

/* HTML - Orange tones */
[data-language="html"],
[data-language="markdown"] {
	--code-language-bar-color: var(--color-orange-500);
	--code-background: color-mix(in srgb, var(--code-language-bar-color) 8%, black);
	--code-pacman-color: #F7F700;
	--code-mark-one: var(--color-red-300);
	--code-mark-two: var(--color-orange-300);
	--code-mark-three: var(--color-yellow-300);
	--code-tag-color: var(--color-orange-400);
	--code-attribute-color: var(--color-orange-300);
	--code-string-color: var(--color-orange-200);
	--code-punctuation-color: var(--color-orange-500);
}

/* CSS - Blue tones */
[data-language="css"] {
	--code-language-bar-color: var(--color-blue-500);
	--code-background: color-mix(in srgb, var(--code-language-bar-color) 8%, black);
	--code-pacman-color: #78F8A0;
	--code-mark-one: var(--color-blue-300);
	--code-mark-two: var(--color-purple-300);
	--code-mark-three: var(--color-pink-300);
	--code-selector-color: var(--color-blue-300);
	--code-property-color: var(--color-blue-400);
	--code-string-color: var(--color-blue-200);
	--code-number-color: var(--color-blue-300);
	--code-unit-color: var(--color-blue-300);
	--code-keyword-color: var(--color-blue-500);
	--code-punctuation-color: var(--color-blue-500);
	--code-class-color: var(--color-blue-400);
}

/* JAVASCRIPT - Yellow tones */
[data-language="javascript"] {
	--code-language-bar-color: var(--color-yellow-500);
	--code-background: color-mix(in srgb, var(--code-language-bar-color) 8%, black);
	--code-pacman-color: #9B85FF;
	--code-mark-one: var(--color-yellow-300);
	--code-mark-two: var(--color-green-300);
	--code-mark-three: var(--color-blue-300);
	--code-keyword-color: var(--color-yellow-400);
	--code-function-color: var(--color-yellow-300);
	--code-string-color: var(--color-yellow-200);
	--code-number-color: var(--color-yellow-500);
	--code-property-color: var(--color-yellow-300);
	--code-operator-color: var(--color-yellow-400);
	--code-punctuation-color: var(--color-yellow-500);
}

/* PHP - Purple tones */
[data-language="php"] {
	--code-language-bar-color: var(--color-purple-500);
	--code-background: color-mix(in srgb, var(--code-language-bar-color) 8%, black);
	--code-pacman-color: #FF9A6F;
	--code-mark-one: var(--color-purple-300);
	--code-mark-two: var(--color-pink-300);
	--code-mark-three: var(--color-blue-300);
	--code-keyword-color: var(--color-purple-400);
	--code-function-color: var(--color-purple-300);
	--code-variable-color: var(--color-purple-200);
	--code-string-color: var(--color-purple-100);
	--code-number-color: var(--color-purple-300);
	--code-operator-color: var(--color-purple-300);
	--code-delimiter-color: var(--color-purple-500);
	--code-punctuation-color: var(--color-purple-500);
	--code-special-color: var(--color-purple-500);
}

/* VUE - Green tones */
/* data-language for snippets, data-pane on pane-wrapper for study (vue parses as html) */
[data-language="vue"],
[data-pane="vue"] .code-study,
[data-pane="vue"] .cm-content {
	--code-language-bar-color: var(--color-green-500);
	--code-background: color-mix(in srgb, var(--code-language-bar-color) 8%, black);
	--code-pacman-color: #F7F700;
	--code-mark-one: var(--color-yellow-300);
	--code-mark-two: var(--color-green-300);
	--code-mark-three: var(--color-blue-300);
	--code-keyword-color: var(--color-green-400);
	--code-function-color: var(--color-green-300);
	--code-string-color: var(--color-green-200);
	--code-number-color: var(--color-green-500);
	--code-property-color: var(--color-green-300);
	--code-tag-color: var(--color-green-400);
	--code-attribute-color: var(--color-green-300);
	--code-punctuation-color: var(--color-green-500);
}

/* PYTHON - Pink tones */
[data-language="python"] {
	--code-language-bar-color: var(--color-pink-500);
	--code-background: color-mix(in srgb, var(--code-language-bar-color) 8%, black);
	--code-pacman-color: #fc0;
	--code-mark-one: var(--color-pink-300);
	--code-mark-two: var(--color-purple-300);
	--code-mark-three: var(--color-blue-300);
	--code-keyword-color: var(--color-pink-400);
	--code-function-color: var(--color-pink-300);
	--code-string-color: var(--color-pink-200);
	--code-number-color: var(--color-pink-300);
	--code-operator-color: var(--color-pink-400);
	--code-punctuation-color: var(--color-pink-500);
}

/* RUBY - Red tones */
[data-language="ruby"] {
	--code-language-bar-color: var(--color-red-500);
	--code-background: color-mix(in srgb, var(--code-language-bar-color) 8%, black);
	--code-pacman-color: #fc0;
	--code-mark-one: var(--color-red-300);
	--code-mark-two: var(--color-orange-300);
	--code-mark-three: var(--color-yellow-300);
	--code-keyword-color: var(--color-red-400);
	--code-function-color: var(--color-red-300);
	--code-string-color: var(--color-red-200);
	--code-number-color: var(--color-red-300);
	--code-operator-color: var(--color-red-400);
	--code-punctuation-color: var(--color-red-500);
}

/* PLAINTEXT - No syntax, just white. Default for new fields. */
[data-language="plaintext"] {
	--code-language-bar-color: rgba(255, 255, 255, 0.3);
}

/* MIXED - Catch-all / unclear code. Same neutral identity as plaintext but
   uses HTML grammar so any markup-shaped tokens get colored. No language-
   specific palette overrides — inherits the white-on-black defaults. */
[data-language="mixed"] {
	--code-language-bar-color: rgba(255, 255, 255, 0.5);
}

/* JSON - Amber tones (data, configuration vibes) */
[data-language="json"] {
	--code-language-bar-color: var(--color-amber-500);
	--code-background: color-mix(in srgb, var(--code-language-bar-color) 8%, black);
	--code-pacman-color: #fc0;
	--code-mark-one: var(--color-amber-300);
	--code-mark-two: var(--color-yellow-300);
	--code-mark-three: var(--color-orange-300);
	--code-property-color: var(--color-amber-300);
	--code-string-color: var(--color-amber-200);
	--code-number-color: var(--color-amber-400);
	--code-punctuation-color: var(--color-amber-500);
}

/* SQL - Cyan tones (structured queries) */
[data-language="sql"] {
	--code-language-bar-color: var(--color-cyan-500);
	--code-background: color-mix(in srgb, var(--code-language-bar-color) 8%, black);
	--code-pacman-color: #fc0;
	--code-mark-one: var(--color-cyan-300);
	--code-mark-two: var(--color-teal-300);
	--code-mark-three: var(--color-blue-300);
	--code-keyword-color: var(--color-cyan-400);
	--code-string-color: var(--color-cyan-200);
	--code-number-color: var(--color-cyan-300);
	--code-operator-color: var(--color-cyan-400);
	--code-punctuation-color: var(--color-cyan-500);
}

/* HANDLEBARS - HTML cousin with a yellow-ember accent for {{template}} expressions.
   Preserved for PE's Ember-era historical examples. */
[data-language="handlebars"] {
	--code-language-bar-color: var(--color-orange-400);
	--code-background: color-mix(in srgb, var(--code-language-bar-color) 8%, black);
	--code-pacman-color: #F7F700;
	--code-mark-one: var(--color-yellow-300);
	--code-mark-two: var(--color-orange-300);
	--code-mark-three: var(--color-amber-300);
	--code-tag-color: var(--color-orange-400);
	--code-attribute-color: var(--color-orange-300);
	--code-string-color: var(--color-orange-200);
	--code-keyword-color: var(--color-yellow-400); /* {{#if}} {{#each}} */
	--code-punctuation-color: var(--color-orange-500);
}


/* =============================================================================
   PANE BACKGROUNDS (code-study)
   Uses :has() to apply language-tinted backgrounds at the pane level.
   ============================================================================= */

.study-pane:has([data-language="html"]),
.study-pane:has([data-language="markdown"]) {
	background: color-mix(in srgb, var(--color-orange-500) var(--code-pane-tint), black);
}

.study-pane:has([data-language="css"]) {
	background: color-mix(in srgb, var(--color-blue-500) var(--code-pane-tint), black);
}

.study-pane:has([data-language="javascript"]) {
	background: color-mix(in srgb, var(--color-yellow-500) var(--code-pane-tint), black);
}

.study-pane:has([data-language="php"]) {
	background: color-mix(in srgb, var(--color-purple-500) var(--code-pane-tint), black);
}

.study-pane:has([data-language="vue"]),
[data-pane="vue"] .study-pane {
	background: color-mix(in srgb, var(--color-green-500) var(--code-pane-tint), black);
}

.study-pane:has([data-language="python"]) {
	background: color-mix(in srgb, var(--color-pink-500) var(--code-pane-tint), black);
}

.study-pane:has([data-language="ruby"]) {
	background: color-mix(in srgb, var(--color-red-500) var(--code-pane-tint), black);
}

.study-pane:has([data-language="json"]) {
	background: color-mix(in srgb, var(--color-amber-500) var(--code-pane-tint), black);
}

.study-pane:has([data-language="sql"]) {
	background: color-mix(in srgb, var(--color-cyan-500) var(--code-pane-tint), black);
}

.study-pane:has([data-language="handlebars"]) {
	background: color-mix(in srgb, var(--color-orange-400) var(--code-pane-tint), black);
}


/* =============================================================================
   LAYER 3: THEME VARIANTS
   Optional modifiers that override language colors.
   Usage: <code-editor data-language="html" data-theme="monochrome">
   ============================================================================= */

/* MONOCHROME - All white, only comments muted. Good for early lessons. */
[data-theme="monochrome"] {
	--code-tag-color: white;
	--code-attribute-color: white;
	--code-string-color: white;
	--code-keyword-color: white;
	--code-function-color: white;
	--code-property-color: white;
	--code-number-color: white;
	--code-operator-color: white;
	--code-punctuation-color: rgba(255, 255, 255, 0.6);
	--code-selector-color: white;
	--code-variable-color: white;
	--code-mark-one: white;
	--code-mark-two: rgba(255, 255, 255, 0.8);
	--code-mark-three: rgba(255, 255, 255, 0.6);
}

/* HIGH CONTRAST - Brighter colors for accessibility */
[data-theme="high-contrast"] {
	--code-background: #000000;
	--code-text-color: #ffffff;
	--code-comment-color: rgba(255, 255, 255, 0.6);
}

/* BARE - Light background, dark text, no syntax colors. For very first examples. */
[data-theme="bare"] {
	--code-background: #f0f0f0;
	--code-text-color: #1a1a1a;
	--code-comment-color: rgba(0, 0, 0, 0.5);
	--code-selection-background: var(--selection-background);
	--code-header-background: #e0e0e0;
	--code-header-text-color: #333;
	--code-language-bar-color: #999;
	--code-tag-color: #1a1a1a;
	--code-attribute-color: #1a1a1a;
	--code-string-color: #1a1a1a;
	--code-keyword-color: #1a1a1a;
	--code-function-color: #1a1a1a;
	--code-property-color: #1a1a1a;
	--code-number-color: #1a1a1a;
	--code-operator-color: #1a1a1a;
	--code-punctuation-color: rgba(0, 0, 0, 0.6);
	--code-selector-color: #1a1a1a;
	--code-variable-color: #1a1a1a;
}


/* =============================================================================
   COMPONENT OVERRIDES
   Site-specific tweaks for code-study (component uses --code-* directly now)
   ============================================================================= */

/* Pacman cursor color mapping for code-snippet — one selector per canonical language */
code-snippet.has-language-bash       { --pacman-color: var(--code-pacman-color); }
code-snippet.has-language-html       { --pacman-color: var(--code-pacman-color); }
code-snippet.has-language-css        { --pacman-color: var(--code-pacman-color); }
code-snippet.has-language-markdown   { --pacman-color: var(--code-pacman-color); }
code-snippet.has-language-php        { --pacman-color: var(--code-pacman-color); }
code-snippet.has-language-javascript { --pacman-color: var(--code-pacman-color); }
code-snippet.has-language-vue        { --pacman-color: var(--code-pacman-color); }
code-snippet.has-language-json       { --pacman-color: var(--code-pacman-color); }
code-snippet.has-language-sql        { --pacman-color: var(--code-pacman-color); }
code-snippet.has-language-handlebars { --pacman-color: var(--code-pacman-color); }
code-snippet.has-language-python     { --pacman-color: var(--code-pacman-color); }
code-snippet.has-language-ruby       { --pacman-color: var(--code-pacman-color); }
code-snippet.has-language-mixed      { --pacman-color: var(--code-pacman-color); }
code-snippet.has-language-plaintext  { --pacman-color: var(--code-pacman-color); }

/* code-study frame layout */
.study-frame {
	--study-selection-background: rgba(255, 255, 255, 0.15);
}

/* Zone gap background (shows through flex gap) */
.study-frame .study-zones {
	background: var(--code-zone-gap-color);
}

/* Borders between adjacent panes in row layouts */
.study-frame .direction-row .pane-wrapper ~ .pane-wrapper > .study-pane {
	border-left: var(--code-divider-size) solid var(--code-divider-color);
}

/* Borders between adjacent panes in column layouts */
.study-frame .direction-column .pane-wrapper ~ .pane-wrapper > .study-pane {
	border-left: none;
	border-top: var(--code-divider-size) solid var(--code-divider-color);
}


/* Font weight with variable font settings */
.study-frame .cm-content {
	font-weight: var(--code-font-weight);
	font-variation-settings: 'wght' var(--code-font-weight), 'wdth' 100, 'slnt' 0;
}

/* Size variants */
.codestudy-wrapper[data-code-size="large"] .code-study {
	--code-font-size: var(--code-font-size-large);
}
.codestudy-wrapper[data-code-size="condensed"] .code-study {
	--code-font-size: var(--code-font-size-small);
}


/* =============================================================================
   MOBILE FALLBACK
   When code-study can't run on small screens.
   ============================================================================= */

code-study {
	display: block;
	border-radius: var(--code-border-radius);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	container-type: inline-size;
}

.codestudy-mobile-fallback {
	display: none;
}

@container (max-width: 800px) {
	code-study.desktop-only .codestudy-mount {
		display: none;
	}

	code-study.desktop-only .codestudy-mobile-fallback {
		display: block;
		padding: 2rem;
		background: var(--color-slate-800);
		border: 1px solid var(--color-slate-600);
		color: var(--color-slate-300);
		text-align: center;
	}
}