/* Butter — design tokens (from the cube design system, project 39361c). */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Surfaces (darkest → lightest) ─────────────────────────── */
  --cube-bg-0: #0e0e0e;
  --cube-bg-1: #141414;
  --cube-bg-2: #1a1a1a;
  --cube-surface: #1e1e1e;
  --cube-card: #2a2a2a;
  --cube-elevated: #363636;

  /* ── Lines ─────────────────────────────────────────────────── */
  --cube-line: #2a2a2a;
  --cube-border: #3a3a3a;
  --cube-line-2: #4a4a4a;

  /* ── Ink (text) ────────────────────────────────────────────── */
  --cube-ink-0: #f4f1ec;
  --cube-ink-1: #e8e8e8;
  --cube-ink-2: #999999;
  --cube-ink-3: #6a6660;

  /* ── Accent (hot orange) ───────────────────────────────────── */
  --cube-accent: #ff8c00;
  --cube-accent-hover: #ff7700;
  --cube-accent-2: #ffa500;
  --cube-accent-ink: #1a0e00;
  --cube-accent-soft: rgba(255, 140, 0, 0.10);
  --cube-accent-line: rgba(255, 140, 0, 0.30);

  /* ── Status ────────────────────────────────────────────────── */
  --cube-success: #2ecc71;
  --cube-success-soft: rgba(46, 204, 113, 0.18);
  --cube-warning: #f39c12;
  --cube-warning-soft: rgba(243, 156, 18, 0.18);
  --cube-danger: #e74c3c;
  --cube-danger-soft: rgba(231, 76, 54, 0.18);
  --cube-info: #29b6f6;
  --cube-info-soft: rgba(41, 182, 246, 0.18);

  /* ── Semantic aliases (only the ones the components use) ───── */
  --surface-page: var(--cube-bg-1);
  --surface-input: var(--cube-surface);
  --text-body: var(--cube-ink-1);

  /* ── Typography ────────────────────────────────────────────── */
  --font-display: 'Chakra Petch', 'Helvetica Neue', sans-serif;
  --font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Layout chrome ─────────────────────────────────────────── */
  --navbar-height: 50px;
  --sidebar-width: 180px;

  /* ── Effects ───────────────────────────────────────────────── */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --focus-ring: 0 0 0 3px rgba(255, 140, 0, 0.2);
  --grad-card-header: linear-gradient(135deg, var(--cube-bg-1) 0%, var(--cube-card) 100%);
  --scanlines: repeating-linear-gradient(180deg, rgba(255,255,255,0.018) 0, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 3px);
}

*::selection { background: rgba(255, 140, 0, 0.35); }

body.cube {
  margin: 0;
  padding: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.cube * { scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
body.cube ::-webkit-scrollbar { width: 10px; height: 10px; }
body.cube ::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 5px; }
body.cube ::-webkit-scrollbar-track { background: #1a1a1a; }

@keyframes ccBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes ccFlash { 0%, 100% { background-color: #8c1508; } 50% { background-color: #b71f0c; } }
@keyframes bttrDrip { 0%, 40% { transform: translateY(0); opacity: 0; } 52% { opacity: 1; } 88% { transform: translateY(4.5px); opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }