/* ============================================================
   Demo Shell: shared visual system for interactive-demos.
   Single source of truth for the demo "feel": brand fonts,
   numeric fade, outline tool buttons, mono labels, 2px corners.
   Link this LAST in a demo's <head> (after inline <style> and
   brand.css / icons.css) so it wins the cascade.
   Approved 2026-06-17. See memory: project_demos_shell_spec.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Body in the brand sans (Inter), kept readable on every demo */
body {
  font-family: var(--font-sans, 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
}

/* Numerics: brand orange->yellow fade in JetBrains Mono.
   Solid #FF7A00 fallback first so the value never washes out
   if background-clip:text is unsupported (readability guard). */
.num-fade {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  color: #FF7A00;
  background: linear-gradient(135deg, #FF7A00 0%, #FF9A00 45%, #FFD400 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tool / in-demo action buttons: outline orange.
   !important to beat brand.css's global filled button skin. */
.shell-outline-btn {
  background: transparent !important;
  background-image: none !important;
  color: #FF7A00 !important;
  border: 1.5px solid #FF7A00 !important;
  box-shadow: none !important;
  border-radius: 2px !important;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  transition: background 0.2s ease;
}
.shell-outline-btn:hover {
  background: rgba(255, 122, 0, 0.12) !important;
}

/* Primary / conversion button: quiet gradient-OUTLINE (never a filled bg).
   The orange->yellow fade lives in the border + label only. border-image is
   surface-agnostic (corners read ~square, fine at the brand 2px). */
.shell-btn-primary {
  background: transparent !important;
  background-image: none !important;
  color: #FF7A00 !important;
  border: 2px solid transparent !important;
  border-image: linear-gradient(135deg, #FF7A00 0%, #FF9A00 45%, #FFD400 100%) 1 !important;
  box-shadow: none !important;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  transition: background 0.2s ease;
}
.shell-btn-primary:hover {
  background: rgba(255, 122, 0, 0.12) !important;
}

/* Eyebrow / form labels: mono uppercase, muted */
.shell-label {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: #b3b3b3;
  font-weight: 500;
}

/* Difficulty / level badges: flat neutral mono chip.
   Never a bright green/yellow rounded pill (decorative color drift). */
.difficulty-badge,
.difficulty-beginner, .difficulty-intermediate, .difficulty-advanced,
.level-badge, .skill-badge {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #b3b3b3 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 2px !important;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Back / home navigation buttons: outline, flat (not a filled orange pill).
   Navigation, so it follows the tool-button outline rule, not conversion. */
.back-btn, .back-home, .back-link, .back-to-home, .home-btn {
  background: transparent !important;
  background-image: none !important;
  color: #FF7A00 !important;
  border: 1.5px solid #FF7A00 !important;
  box-shadow: none !important;
  border-radius: 2px !important;
}

/* 2px corners across common demo surfaces and controls.
   Targets cards / sections / boxes / panels / inputs / buttons;
   circular elements (avatars, dots, slider thumbs) are unaffected
   because they are styled via different classes/pseudo-elements. */
.card,
[class*="-card"], [class*="card-"],
[class*="-box"], [class*="box-"],
[class*="-section"], [class*="section-"],
[class*="-panel"], [class*="panel-"],
[class*="result"], [class*="stat-"],
.chip, .badge, .tag, .pill, .time-badge,
[class*="-badge"], [class*="badge-"],
[class*="-chip"], [class*="chip-"],
[class*="-tag"], [class*="tag-"],
[class*="-pill"], [class*="pill-"],
input, select, textarea, button, .btn {
  border-radius: 2px !important;
}
