/* ==========================================================================
   REPL Theme — Dark terminal aesthetic for ClojureScript playground
   Custom properties, fluid type, logical properties
   ========================================================================== */

.repl-theme {
  --clr-surface:    #1a1b26;
  --clr-surface-2:  #24283b;
  --clr-text:       #c0caf5;
  --clr-text-muted: #565f89;
  --clr-accent:     #7aa2f7;
  --clr-accent-2:   #9ece6a;
  --clr-border:     #3b4261;
  --nav-bg:         #16161e;

  background: var(--clr-surface);
  color: var(--clr-text);
  font-family: 'Consolas', 'Courier New', monospace;
}

.repl-theme .site-nav {
  background: var(--nav-bg);
  border-block-end: 2px solid var(--clr-accent);
}
.repl-theme .site-name { color: var(--clr-accent); font-family: 'Consolas', monospace; }
.repl-theme .nav-link { font-family: 'Consolas', monospace; color: var(--clr-text-muted); }
.repl-theme .nav-link:hover { color: var(--clr-text); }
.repl-theme .nav-link.active { color: var(--clr-accent-2); }
.repl-theme .nav-toggle { color: var(--clr-text); }

.repl-theme .site-footer {
  background: var(--nav-bg);
  border-block-start: 1px solid var(--clr-surface-2);
  color: var(--clr-text-muted);
}

/* --- REPL Layout --- */
.repl-container { max-inline-size: 50rem; margin-inline: auto; }

.repl-title {
  font-size: var(--step-2); color: #bb9af7;
  margin-block-end: var(--space-2xs);
}
.repl-subtitle {
  color: var(--clr-text-muted);
  margin-block-end: var(--space-l);
  font-size: var(--step-0);
}

/* --- Examples Bar --- */
.examples-bar {
  display: flex; gap: var(--space-xs); align-items: center;
  flex-wrap: wrap; margin-block-end: var(--space-m);
}
.examples-label { color: var(--clr-text-muted); font-size: var(--step--1); }
.example-btn {
  padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-s);
  background: var(--clr-surface-2); color: var(--clr-accent); font-size: var(--step--2);
  border: 1px solid var(--clr-border);
  transition: background var(--transition-snappy), color var(--transition-snappy);
}
.example-btn:hover {
  background: var(--clr-border);
  color: var(--clr-text);
}

/* --- Editor --- */
.repl-editor {
  inline-size: 100%; min-block-size: 140px; padding: var(--space-m);
  background: var(--clr-surface-2); color: var(--clr-text);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-m); font-family: 'Consolas', 'Courier New', monospace;
  font-size: var(--step-0); resize: vertical; line-height: 1.5;
  tab-size: 2;
}
.repl-editor:focus { outline: none; border-color: var(--clr-accent); }

/* --- Buttons --- */
.repl-btn-bar { display: flex; gap: var(--space-xs); margin-block: var(--space-s); }

.repl-run-btn {
  padding: var(--space-xs) var(--space-l); border-radius: var(--radius-m);
  background: var(--clr-accent-2); color: var(--clr-surface); font-weight: 700;
  font-size: var(--step-0);
  transition: background var(--transition-snappy);
}
.repl-run-btn:hover { background: #73daca; }

.repl-clear-btn {
  padding: var(--space-xs) var(--space-m); border-radius: var(--radius-m);
  background: var(--clr-border); color: var(--clr-text); font-size: var(--step-0);
  transition: background var(--transition-snappy);
}
.repl-clear-btn:hover { background: var(--clr-text-muted); }

/* --- Output --- */
.repl-output-label {
  font-size: var(--step--2); color: var(--clr-text-muted);
  margin-block-end: var(--space-2xs);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.repl-output {
  inline-size: 100%; min-block-size: 120px; max-block-size: 300px;
  padding: var(--space-m); overflow-y: auto;
  background: var(--nav-bg); color: var(--clr-accent-2);
  border: 1px solid var(--clr-surface-2);
  border-radius: var(--radius-m); font-family: 'Consolas', 'Courier New', monospace;
  font-size: var(--step--1); line-height: 1.5; white-space: pre-wrap;
}

/* --- Action btn REPL override --- */
.repl-theme .action-btn {
  background: var(--clr-surface-2); border-color: var(--clr-border); color: var(--clr-accent);
}
.repl-theme .action-btn:hover {
  background: var(--clr-border); border-color: var(--clr-accent);
}

.repl-theme .metric-card {
  background: var(--clr-surface-2); border-block-end-color: var(--clr-accent);
}
.repl-theme .metric-label { color: var(--clr-text-muted); }