/* ============================================
   Prism.js Syntax Highlighting — Purple Accented
   Custom theme for bruno-theme
   ============================================ */

/* ---- Code Block Container ---- */

code[class*='language-'],
pre[class*='language-'] {
  color: #e8e6ea;
  background: none;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  tab-size: 2;
  hyphens: none;
  font-feature-settings: 'liga' 1, 'calt' 1;
}

/* Code blocks */
pre[class*='language-'] {
  padding: 1.5rem;
  margin: 1.5rem 0;
  overflow: auto;
  border-radius: 0.75rem;
  background-color: #121218;
  border: 1px solid color-mix(in oklch, #6b6872 10%, transparent);
  -webkit-overflow-scrolling: touch;
}

/* Inline code */
:not(pre) > code[class*='language-'] {
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  background-color: #1a1a24;
  border: 1px solid color-mix(in oklch, #6b6872 10%, transparent);
  color: #c084fc;
  white-space: normal;
}

/* ---- Token Styles ---- */

/* Comments */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #7a7788;
  font-style: italic;
}

/* Punctuation */
.token.punctuation {
  color: #a09da5;
}

/* Namespace opacity */
.token.namespace {
  opacity: 0.8;
}

/* Strings & Characters */
.token.string,
.token.attr-value,
.token.template-string,
.token.char {
  color: #06b6d4;
}

/* Numbers & Booleans */
.token.number,
.token.boolean {
  color: #f59e0b;
}

/* Constants & Symbols */
.token.constant,
.token.symbol,
.token.deleted {
  color: #ef4444;
}

/* Keywords & Control Flow */
.token.keyword,
.token.control,
.token.directive {
  color: #a855f7;
  font-weight: 500;
}

/* Operators */
.token.operator {
  color: #c084fc;
}

/* Tags (HTML/XML) */
.token.tag {
  color: #ef4444;
}

.token.tag .token.punctuation {
  color: #a09da5;
}

/* Attribute Names */
.token.attr-name {
  color: #f59e0b;
}

/* Functions & Methods */
.token.function,
.token.method {
  color: #c084fc;
}

/* Classes & Types */
.token.class-name,
.token.builtin,
.token.type {
  color: #22d3ee;
  font-weight: 500;
}

/* Properties */
.token.property {
  color: #a855f7;
}

/* Selectors (CSS) */
.token.selector {
  color: #c084fc;
}

/* Variables */
.token.variable {
  color: #e8e6ea;
}

/* Regex */
.token.regex {
  color: #fbbf24;
}

/* Important & Bold */
.token.important,
.token.bold {
  font-weight: 700;
}

.token.important {
  color: #ef4444;
}

/* Italic */
.token.italic {
  font-style: italic;
}

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

/* Inserted */
.token.inserted {
  color: #22c55e;
}

/* URLs */
.token.url {
  color: #06b6d4;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, #06b6d4 40%, transparent);
}

/* Atrule (CSS @rules) */
.token.atrule {
  color: #a855f7;
}

/* Annotation / Decorator */
.token.annotation,
.token.decorator {
  color: #f59e0b;
}

/* ---- Line Numbers ---- */

pre[class*='language-'].line-numbers {
  position: relative;
  padding-left: 3.5rem;
  counter-reset: linenumber;
}

pre[class*='language-'].line-numbers > code {
  position: relative;
  white-space: inherit;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 1.5rem;
  left: 0;
  width: 3rem;
  letter-spacing: -1px;
  border-right: 1px solid color-mix(in oklch, #6b6872 15%, transparent);
  user-select: none;
}

.line-numbers-rows > span {
  display: block;
  counter-increment: linenumber;
  padding-right: 0.75rem;
  text-align: right;
}

.line-numbers-rows > span::before {
  content: counter(linenumber);
  color: #4a4860;
  font-size: 0.8em;
}

/* ---- Line Highlight ---- */

.line-highlight {
  background: color-mix(in oklch, #7c3aed 10%, transparent);
  border-left: 3px solid #7c3aed;
  margin-left: -1.5rem;
  padding-left: calc(1.5rem - 3px);
  margin-right: -1.5rem;
  padding-right: 1.5rem;
}

/* ---- Diff Highlighting ---- */

.token.deleted:not(.punctuation) {
  background-color: color-mix(in oklch, #ef4444 10%, transparent);
  color: #fca5a5;
  display: inline-block;
  width: 100%;
}

.token.inserted:not(.punctuation) {
  background-color: color-mix(in oklch, #22c55e 10%, transparent);
  color: #86efac;
  display: inline-block;
  width: 100%;
}

/* ---- Toolbar (Copy Button, Language Label) ---- */

div.code-toolbar > .toolbar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  opacity: 0;
  transition: opacity 200ms ease;
}

div.code-toolbar:hover > .toolbar,
div.code-toolbar:focus-within > .toolbar {
  opacity: 1;
}

div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > span {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  color: #a09da5;
  background-color: #1a1a24;
  border: 1px solid color-mix(in oklch, #6b6872 15%, transparent);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

div.code-toolbar > .toolbar > .toolbar-item > button:hover {
  color: #e8e6ea;
  background-color: #232330;
  border-color: color-mix(in oklch, #7c3aed 40%, transparent);
}

/* ---- Language Label ---- */

pre[class*='language-']::before {
  content: attr(data-language);
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b6872;
  pointer-events: none;
}

/* Only show when data-language is set */
pre[class*='language-']:not([data-language])::before {
  display: none;
}

/* ---- Light Mode Overrides ---- */

[data-theme='light'] {
  & code[class*='language-'],
  & pre[class*='language-'] {
    color: #1a1a2e;
  }

  & pre[class*='language-'] {
    background-color: #f8f8fc;
    border-color: color-mix(in oklch, #1a1a2e 8%, transparent);
  }

  & :not(pre) > code[class*='language-'] {
    background-color: #f0ecf9;
    border-color: color-mix(in oklch, #1a1a2e 8%, transparent);
    color: #7c3aed;
  }

  & .token.comment,
  & .token.prolog,
  & .token.doctype,
  & .token.cdata {
    color: #8888a0;
  }

  & .token.punctuation {
    color: #4a4a5a;
  }

  & .token.string,
  & .token.attr-value,
  & .token.template-string,
  & .token.char {
    color: #0891b2;
  }

  & .token.number,
  & .token.boolean {
    color: #d97706;
  }

  & .token.keyword,
  & .token.control,
  & .token.directive {
    color: #7c3aed;
  }

  & .token.operator {
    color: #9333ea;
  }

  & .token.function,
  & .token.method {
    color: #6d28d9;
  }

  & .token.class-name,
  & .token.builtin,
  & .token.type {
    color: #0e7490;
  }

  & .token.property,
  & .token.selector {
    color: #7c3aed;
  }

  & .token.variable {
    color: #1a1a2e;
  }

  & .token.tag {
    color: #dc2626;
  }

  & .token.attr-name {
    color: #d97706;
  }

  & .line-numbers-rows > span::before {
    color: #b0b0c0;
  }

  & .line-highlight {
    background: color-mix(in oklch, #7c3aed 6%, transparent);
    border-left-color: #7c3aed;
  }

  & div.code-toolbar > .toolbar > .toolbar-item > button,
  & div.code-toolbar > .toolbar > .toolbar-item > a,
  & div.code-toolbar > .toolbar > .toolbar-item > span {
    color: #4a4a5a;
    background-color: #ffffff;
    border-color: color-mix(in oklch, #1a1a2e 10%, transparent);
  }

  & div.code-toolbar > .toolbar > .toolbar-item > button:hover {
    color: #1a1a2e;
    background-color: #f0ecf9;
    border-color: color-mix(in oklch, #7c3aed 30%, transparent);
  }

  & pre[class*='language-']::before {
    color: #8888a0;
  }
}

/* ---- Auto Mode Light Overrides ---- */

@media (prefers-color-scheme: light) {
  [data-theme='auto'] {
    & code[class*='language-'],
    & pre[class*='language-'] {
      color: #1a1a2e;
    }

    & pre[class*='language-'] {
      background-color: #f8f8fc;
      border-color: color-mix(in oklch, #1a1a2e 8%, transparent);
    }

    & :not(pre) > code[class*='language-'] {
      background-color: #f0ecf9;
      border-color: color-mix(in oklch, #1a1a2e 8%, transparent);
      color: #7c3aed;
    }

    & .token.comment,
    & .token.prolog,
    & .token.doctype,
    & .token.cdata {
      color: #8888a0;
    }

    & .token.punctuation {
      color: #4a4a5a;
    }

    & .token.string,
    & .token.attr-value,
    & .token.template-string,
    & .token.char {
      color: #0891b2;
    }

    & .token.number,
    & .token.boolean {
      color: #d97706;
    }

    & .token.keyword,
    & .token.control,
    & .token.directive {
      color: #7c3aed;
    }

    & .token.operator {
      color: #9333ea;
    }

    & .token.function,
    & .token.method {
      color: #6d28d9;
    }

    & .token.class-name,
    & .token.builtin,
    & .token.type {
      color: #0e7490;
    }

    & .token.property,
    & .token.selector {
      color: #7c3aed;
    }

    & .token.variable {
      color: #1a1a2e;
    }

    & .token.tag {
      color: #dc2626;
    }

    & .token.attr-name {
      color: #d97706;
    }

    & .line-highlight {
      background: color-mix(in oklch, #7c3aed 6%, transparent);
    }

    & pre[class*='language-']::before {
      color: #8888a0;
    }
  }
}

/* ---- Selection ---- */

code[class*='language-']::selection,
pre[class*='language-']::selection,
code[class*='language-'] *::selection,
pre[class*='language-'] *::selection {
  background-color: color-mix(in oklch, #7c3aed 35%, transparent);
  color: inherit;
}

/* ============================================
   Enhanced Code Block Wrapper
   Terminal-style with header, copy button, line numbers,
   animated gradient border, frosted glass effects
   ============================================ */

/* ---- Wrapper ---- */

.code-block {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 0.75rem;
  background-color: #121218;
  border: 1px solid color-mix(in oklch, #6b6872 15%, transparent);
  overflow: visible;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.3s ease;
}

.code-block:hover {
  border-color: color-mix(in oklch, #7c3aed 25%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklch, #7c3aed 8%, transparent),
    0 0 40px -8px color-mix(in oklch, #7c3aed 15%, transparent),
    0 8px 32px -8px color-mix(in oklch, #000 25%, transparent);
}

/* ---- Animated Gradient Border (hover) ---- */

.code-block::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(0.75rem + 1px);
  padding: 1px;
  background: conic-gradient(
    from var(--gradient-angle),
    transparent 0%,
    color-mix(in oklch, #7c3aed 50%, transparent) 20%,
    color-mix(in oklch, #a855f7 35%, transparent) 40%,
    color-mix(in oklch, #06b6d4 20%, transparent) 60%,
    color-mix(in oklch, #7c3aed 30%, transparent) 80%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.5s ease;
  animation: rotate-gradient 4s linear infinite;
  animation-play-state: paused;
}

.code-block:hover::before {
  opacity: 1;
  animation-play-state: running;
}

/* ---- Header ---- */

.code-block__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  background: color-mix(in oklch, #1a1a24 85%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid color-mix(in oklch, #6b6872 10%, transparent);
  border-radius: 0.75rem 0.75rem 0 0;
  user-select: none;
  min-height: 2.375rem;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Accent line under header */
.code-block__header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklch, #7c3aed 0%, transparent) 10%,
    color-mix(in oklch, #7c3aed 15%, transparent) 50%,
    color-mix(in oklch, #7c3aed 0%, transparent) 90%,
    transparent
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.code-block:hover .code-block__header::after {
  opacity: 1;
}

/* ---- macOS Dots ---- */

.code-block__dots {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.code-block__dots span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  transition: opacity 0.3s ease,
              transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.code-block__dots span:nth-child(1) { background-color: #ef4444; opacity: 0.3; }
.code-block__dots span:nth-child(2) { background-color: #f59e0b; opacity: 0.3; }
.code-block__dots span:nth-child(3) { background-color: #22c55e; opacity: 0.3; }

.code-block:hover .code-block__dots span:nth-child(1) {
  opacity: 0.9;
  transform: scale(1.15);
  box-shadow: 0 0 6px color-mix(in oklch, #ef4444 40%, transparent);
}
.code-block:hover .code-block__dots span:nth-child(2) {
  opacity: 0.9;
  transform: scale(1.15);
  box-shadow: 0 0 6px color-mix(in oklch, #f59e0b 40%, transparent);
}
.code-block:hover .code-block__dots span:nth-child(3) {
  opacity: 0.9;
  transform: scale(1.15);
  box-shadow: 0 0 6px color-mix(in oklch, #22c55e 40%, transparent);
}

/* ---- Language Badge ---- */

.code-block__lang {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.675rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4a4860;
  transition: color 0.3s ease;
}

.code-block:hover .code-block__lang {
  color: #7c6fad;
}

/* ---- Copy Button ---- */

.code-block__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.675rem;
  font-weight: 500;
  color: #4a4860;
  background: color-mix(in oklch, #7c3aed 4%, transparent);
  border: 1px solid color-mix(in oklch, #6b6872 10%, transparent);
  border-radius: 0.375rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s ease,
              background-color 0.2s ease,
              border-color 0.2s ease,
              transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease;
}

.code-block__copy:hover {
  color: #e8e6ea;
  background-color: color-mix(in oklch, #7c3aed 15%, transparent);
  border-color: color-mix(in oklch, #7c3aed 30%, transparent);
  box-shadow: 0 0 12px color-mix(in oklch, #7c3aed 10%, transparent);
  transform: translateY(-1px);
}

.code-block__copy:active {
  transform: translateY(0) scale(0.95);
  transition-duration: 0.06s;
}

/* Copy / Check icon states */
.code-block__copy-icon,
.code-block__check-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.code-block__check-icon {
  display: none;
}

.code-block__copy.is-copied .code-block__copy-icon {
  display: none;
}

.code-block__copy.is-copied .code-block__check-icon {
  display: inline-flex;
  animation: codeBlockCheckPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.code-block__copy.is-copied {
  color: #22c55e;
  background-color: color-mix(in oklch, #22c55e 10%, transparent);
  border-color: color-mix(in oklch, #22c55e 25%, transparent);
  box-shadow: 0 0 12px color-mix(in oklch, #22c55e 10%, transparent);
}

.code-block__copy.is-copied .code-block__copy-label {
  animation: codeBlockLabelFade 0.3s ease;
}

@keyframes codeBlockCheckPop {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  50% { transform: scale(1.25) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes codeBlockLabelFade {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- Body ---- */

.code-block__body {
  position: relative;
  z-index: 1;
  display: flex;
  overflow: hidden;
  border-radius: 0 0 0.75rem 0.75rem;
  background-color: #121218;
  transition: background-color 0.3s ease;
}

/* ---- Scroll Overflow Indicator ---- */

.code-block.is-scrollable .code-block__body::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.5rem;
  background: linear-gradient(to right, transparent, color-mix(in oklch, #121218 90%, transparent));
  pointer-events: none;
  z-index: 2;
  border-radius: 0 0 0.75rem 0;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

/* ---- Line Numbers Gutter ---- */

.code-block__gutter {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-width: 3.25rem;
  padding: 1.25rem 0;
  text-align: right;
  user-select: none;
  pointer-events: none;
  border-right: 1px solid color-mix(in oklch, #6b6872 10%, transparent);
  background: linear-gradient(
    135deg,
    color-mix(in oklch, #0a0a0f 50%, transparent),
    color-mix(in oklch, #0d0d14 40%, transparent)
  );
  transition: background 0.3s ease, border-color 0.3s ease;
}

.code-block__gutter span {
  display: block;
  padding: 0 0.75rem 0 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  line-height: calc(0.875rem * 1.7); /* Match code font-size × line-height exactly */
  color: #3d3a55;
  transition: color 0.15s ease;
}

/* ---- Reset pre inside wrapper ---- */

.code-block pre,
.code-block pre[class*='language-'] {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  flex: 1;
  min-width: 0;
  padding: 1.25rem 1.5rem;
  white-space: pre !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.code-block pre code,
.code-block pre[class*='language-'] code {
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Hide the old language label pseudo-element */
.code-block pre[class*='language-']::before {
  display: none !important;
}

/* ---- Custom Scrollbar ---- */

.code-block pre::-webkit-scrollbar {
  height: 6px;
}

.code-block pre::-webkit-scrollbar-track {
  background: transparent;
  margin: 0 0.5rem;
}

.code-block pre::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, #6b6872 20%, transparent);
  border-radius: 3px;
  transition: background 0.2s ease;
}

.code-block pre::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklch, #7c3aed 30%, transparent);
}

.code-block pre {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklch, #6b6872 20%, transparent) transparent;
}

/* ---- Responsive ---- */

@media (max-width: 480px) {
  .code-block__copy-label {
    display: none;
  }

  .code-block__gutter {
    min-width: 2.5rem;
  }

  .code-block__gutter span {
    font-size: 0.65rem;
    padding: 0 0.5rem 0 0.25rem;
  }

  .code-block pre,
  .code-block pre[class*='language-'] {
    padding: 1rem;
  }

  .code-block::before {
    display: none;
  }
}

/* ---- Enhanced Wrapper: Light Mode ---- */

[data-theme='light'] .code-block {
  background-color: #f8f8fc;
  border-color: color-mix(in oklch, #1a1a2e 10%, transparent);
}

[data-theme='light'] .code-block:hover {
  border-color: color-mix(in oklch, #7c3aed 20%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in oklch, #7c3aed 5%, transparent),
    0 0 40px -8px color-mix(in oklch, #7c3aed 8%, transparent),
    0 8px 32px -8px color-mix(in oklch, #000 8%, transparent);
}

[data-theme='light'] .code-block::before {
  background: conic-gradient(
    from var(--gradient-angle),
    transparent 0%,
    color-mix(in oklch, #7c3aed 35%, transparent) 20%,
    color-mix(in oklch, #a855f7 25%, transparent) 40%,
    color-mix(in oklch, #06b6d4 15%, transparent) 60%,
    color-mix(in oklch, #7c3aed 20%, transparent) 80%,
    transparent 100%
  );
}

[data-theme='light'] .code-block__header {
  background: color-mix(in oklch, #ebebf0 90%, transparent);
  border-bottom-color: color-mix(in oklch, #1a1a2e 6%, transparent);
}

[data-theme='light'] .code-block__body {
  background-color: #f8f8fc;
}

[data-theme='light'] .code-block.is-scrollable .code-block__body::after {
  background: linear-gradient(to right, transparent, color-mix(in oklch, #f8f8fc 90%, transparent));
}

[data-theme='light'] .code-block__dots span:nth-child(1),
[data-theme='light'] .code-block__dots span:nth-child(2),
[data-theme='light'] .code-block__dots span:nth-child(3) {
  opacity: 0.45;
}

[data-theme='light'] .code-block:hover .code-block__dots span {
  opacity: 0.9;
}

[data-theme='light'] .code-block__lang {
  color: #a0a0b8;
}

[data-theme='light'] .code-block:hover .code-block__lang {
  color: #7c6fad;
}

[data-theme='light'] .code-block__copy {
  color: #a0a0b8;
  background: color-mix(in oklch, #7c3aed 3%, transparent);
  border-color: color-mix(in oklch, #1a1a2e 6%, transparent);
}

[data-theme='light'] .code-block__copy:hover {
  color: #1a1a2e;
  background-color: color-mix(in oklch, #7c3aed 8%, transparent);
  border-color: color-mix(in oklch, #7c3aed 20%, transparent);
  box-shadow: 0 0 12px color-mix(in oklch, #7c3aed 6%, transparent);
}

[data-theme='light'] .code-block__copy.is-copied {
  color: #16a34a;
  background-color: color-mix(in oklch, #22c55e 6%, transparent);
  border-color: color-mix(in oklch, #22c55e 15%, transparent);
  box-shadow: 0 0 12px color-mix(in oklch, #22c55e 6%, transparent);
}

[data-theme='light'] .code-block__gutter {
  background: linear-gradient(135deg,
    color-mix(in oklch, #e4e4ec 60%, transparent),
    color-mix(in oklch, #eaeaf0 50%, transparent)
  );
  border-right-color: color-mix(in oklch, #1a1a2e 6%, transparent);
}

[data-theme='light'] .code-block__gutter span {
  color: #c0c0d0;
}

[data-theme='light'] .code-block pre::-webkit-scrollbar-thumb {
  background: color-mix(in oklch, #1a1a2e 12%, transparent);
}

[data-theme='light'] .code-block pre::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklch, #7c3aed 20%, transparent);
}

[data-theme='light'] .code-block pre {
  scrollbar-color: color-mix(in oklch, #1a1a2e 12%, transparent) transparent;
}

/* ---- Enhanced Wrapper: Auto Mode (Light) ---- */

@media (prefers-color-scheme: light) {
  [data-theme='auto'] .code-block {
    background-color: #f8f8fc;
    border-color: color-mix(in oklch, #1a1a2e 10%, transparent);
  }

  [data-theme='auto'] .code-block:hover {
    border-color: color-mix(in oklch, #7c3aed 20%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in oklch, #7c3aed 5%, transparent),
      0 0 40px -8px color-mix(in oklch, #7c3aed 8%, transparent),
      0 8px 32px -8px color-mix(in oklch, #000 8%, transparent);
  }

  [data-theme='auto'] .code-block::before {
    background: conic-gradient(
      from var(--gradient-angle),
      transparent 0%,
      color-mix(in oklch, #7c3aed 35%, transparent) 20%,
      color-mix(in oklch, #a855f7 25%, transparent) 40%,
      color-mix(in oklch, #06b6d4 15%, transparent) 60%,
      color-mix(in oklch, #7c3aed 20%, transparent) 80%,
      transparent 100%
    );
  }

  [data-theme='auto'] .code-block__header {
    background: color-mix(in oklch, #ebebf0 90%, transparent);
    border-bottom-color: color-mix(in oklch, #1a1a2e 6%, transparent);
  }

  [data-theme='auto'] .code-block__body {
    background-color: #f8f8fc;
  }

  [data-theme='auto'] .code-block.is-scrollable .code-block__body::after {
    background: linear-gradient(to right, transparent, color-mix(in oklch, #f8f8fc 90%, transparent));
  }

  [data-theme='auto'] .code-block__dots span:nth-child(1),
  [data-theme='auto'] .code-block__dots span:nth-child(2),
  [data-theme='auto'] .code-block__dots span:nth-child(3) {
    opacity: 0.45;
  }

  [data-theme='auto'] .code-block:hover .code-block__dots span {
    opacity: 0.9;
  }

  [data-theme='auto'] .code-block__lang {
    color: #a0a0b8;
  }

  [data-theme='auto'] .code-block:hover .code-block__lang {
    color: #7c6fad;
  }

  [data-theme='auto'] .code-block__copy {
    color: #a0a0b8;
    background: color-mix(in oklch, #7c3aed 3%, transparent);
    border-color: color-mix(in oklch, #1a1a2e 6%, transparent);
  }

  [data-theme='auto'] .code-block__copy:hover {
    color: #1a1a2e;
    background-color: color-mix(in oklch, #7c3aed 8%, transparent);
    border-color: color-mix(in oklch, #7c3aed 20%, transparent);
  }

  [data-theme='auto'] .code-block__copy.is-copied {
    color: #16a34a;
    background-color: color-mix(in oklch, #22c55e 6%, transparent);
    border-color: color-mix(in oklch, #22c55e 15%, transparent);
  }

  [data-theme='auto'] .code-block__gutter {
    background: linear-gradient(135deg,
      color-mix(in oklch, #e4e4ec 60%, transparent),
      color-mix(in oklch, #eaeaf0 50%, transparent)
    );
    border-right-color: color-mix(in oklch, #1a1a2e 6%, transparent);
  }

  [data-theme='auto'] .code-block__gutter span {
    color: #c0c0d0;
  }

  [data-theme='auto'] .code-block pre::-webkit-scrollbar-thumb {
    background: color-mix(in oklch, #1a1a2e 12%, transparent);
  }

  [data-theme='auto'] .code-block pre {
    scrollbar-color: color-mix(in oklch, #1a1a2e 12%, transparent) transparent;
  }
}

/* ---- Reduced Motion ---- */

@media (prefers-reduced-motion: reduce) {
  .code-block,
  .code-block__header,
  .code-block__body,
  .code-block__copy,
  .code-block__dots span,
  .code-block__gutter {
    transition: none !important;
  }

  .code-block::before {
    animation: none !important;
    display: none;
  }

  .code-block__copy.is-copied .code-block__check-icon,
  .code-block__copy.is-copied .code-block__copy-label {
    animation: none !important;
  }
}