/**
 * Prism.js Dual-Theme Syntax Highlighting
 *
 * This file provides theme-aware token colors for Prism.js syntax highlighting.
 * It switches between two carefully chosen dark-background palettes based on the
 * site's [data-theme] attribute (light/dark mode).
 *
 * IMPORTANT: Both light and dark site modes use DARK CODE BLOCK BACKGROUNDS:
 * - Light mode: #263238 (Material Palenight blue-gray)
 * - Dark mode:  #1e1e1e (VS Code dark gray)
 *
 * Token palettes are designed for these dark backgrounds:
 * - Light mode tokens: Electric Palenight palette (vibrant, saturated)
 * - Dark mode tokens:  One Dark-inspired palette (vivid, punchy)
 *
 * All colors meet WCAG AA contrast requirements (4.5:1 minimum against their
 * respective backgrounds).
 *
 * @since 1.1.0 (Phase 7 - Dual-Theme Styling)
 */

/* ==========================================================================
   CSS Variables - Light Mode Defaults (Electric Palenight)
   ========================================================================== */

:root {
  /* Base colors */
  --prism-foreground: #eeffff;
  --prism-background: transparent;  /* Background handled by code-blocks.css */

  /* Token categories */
  --prism-comment: #546e7a;         /* Muted gray-blue — comments stay subdued */
  --prism-punctuation: #80f4ff;     /* Electric cyan (10.2:1 on #263238) */
  --prism-property: #ff9566;        /* Hot orange (6.8:1 on #263238) */
  --prism-string: #c3ff75;          /* Electric green (11.2:1 on #263238) */
  --prism-keyword: #d68fff;         /* Bright purple (5.7:1 on #263238) */
  --prism-function: #75b5ff;        /* Bright blue (6.1:1 on #263238) */
  --prism-operator: #80f4ff;        /* Electric cyan (same as punctuation) */
  --prism-variable: #ff6b76;        /* Bright pink (4.8:1 on #263238) */
  --prism-regex: #ff9566;           /* Hot orange (same as property) */
  --prism-important: #ff5572;       /* Vivid red (4.5:1 on #263238) */
  --prism-entity: #eeffff;          /* Same as foreground */
  --prism-atrule: #d68fff;          /* Bright purple (same as keyword) */
  --prism-selector: #c3ff75;        /* Electric green (same as string) */
  --prism-inserted: #c3ff75;        /* Electric green */
  --prism-deleted: #ff5572;         /* Vivid red */
  --prism-namespace-opacity: 0.7;

  /* Brand color (used by Phase 8 copy button) */
  --prism-brand: #cc433c;
}

/* ==========================================================================
   Light Mode (Electric Palenight for dark bg #263238)
   ========================================================================== */

[data-theme="light"] {
  --prism-foreground: #eeffff;
  --prism-background: transparent;
  --prism-comment: #546e7a;
  --prism-punctuation: #80f4ff;
  --prism-property: #ff9566;
  --prism-string: #c3ff75;
  --prism-keyword: #d68fff;
  --prism-function: #75b5ff;
  --prism-operator: #80f4ff;
  --prism-variable: #ff6b76;
  --prism-regex: #ff9566;
  --prism-important: #ff5572;
  --prism-entity: #eeffff;
  --prism-atrule: #d68fff;
  --prism-selector: #c3ff75;
  --prism-inserted: #c3ff75;
  --prism-deleted: #ff5572;
  --prism-namespace-opacity: 0.7;
  --prism-brand: #cc433c;
}

/* ==========================================================================
   Dark Mode (One Dark-inspired for dark bg #1e1e1e)
   ========================================================================== */

[data-theme="dark"] {
  --prism-foreground: #d4d7d5;
  --prism-background: transparent;
  --prism-comment: #969896;          /* Muted — comments stay subdued */
  --prism-punctuation: #d4d7d5;
  --prism-property: #ffc85c;         /* Bright gold (10.9:1 on #1e1e1e) */
  --prism-string: #98e04e;           /* Vivid green (10.5:1 on #1e1e1e) */
  --prism-keyword: #c678dd;          /* One Dark purple (5.8:1 on #1e1e1e) */
  --prism-function: #61afef;         /* One Dark blue (7.2:1 on #1e1e1e) */
  --prism-operator: #56d4c8;         /* Vivid teal (9.4:1 on #1e1e1e) */
  --prism-variable: #ffc85c;         /* Bright gold (same as property) */
  --prism-regex: #f0a050;            /* Bright orange (7.2:1 on #1e1e1e) */
  --prism-important: #e06060;        /* Bright red (4.8:1 on #1e1e1e) */
  --prism-entity: #d4d7d5;
  --prism-atrule: #c678dd;           /* One Dark purple (same as keyword) */
  --prism-selector: #61afef;         /* One Dark blue (same as function) */
  --prism-inserted: #98e04e;         /* Vivid green */
  --prism-deleted: #e06060;          /* Bright red */
  --prism-namespace-opacity: 0.7;
  --prism-brand: #cc433c;
}

/* ==========================================================================
   Token Selector Mappings
   ========================================================================== */

/* Base code elements */
code[class*="language-"],
pre[class*="language-"] {
  color: var(--prism-foreground);
  background: var(--prism-background);
}

/* Comments and metadata */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--prism-comment);
}

/* Punctuation */
.token.punctuation {
  color: var(--prism-punctuation);
}

/* Namespace opacity */
.token.namespace {
  opacity: var(--prism-namespace-opacity);
}

/* Properties, tags, booleans, numbers, constants, symbols */
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
  color: var(--prism-property);
}

/* Selectors, attribute names, strings, characters, built-ins */
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
  color: var(--prism-string);
}

/* Operators, entities, URLs, CSS/style strings */
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: var(--prism-operator);
  /* Note: Removed background from default Prism theme operator rule */
}

/* At-rules, attribute values, keywords */
.token.atrule,
.token.attr-value,
.token.keyword {
  color: var(--prism-keyword);
}

/* Functions and class names */
.token.function,
.token.class-name {
  color: var(--prism-function);
}

/* Regular expressions, important, variables */
.token.regex,
.token.important,
.token.variable {
  color: var(--prism-variable);
}

/* Font weight and style modifiers */
.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

/* Entity cursor */
.token.entity {
  cursor: help;
}

/* Diff highlighting */
.token.inserted {
  color: var(--prism-inserted);
}

.token.deleted {
  color: var(--prism-deleted);
}

/* ==========================================================================
   Smooth Theme Transitions
   ========================================================================== */

code[class*="language-"],
pre[class*="language-"],
.token {
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* ==========================================================================
   Accessibility - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  code[class*="language-"],
  pre[class*="language-"],
  .token {
    transition: none;
  }
}